A guide on dynamically adjusting image size in ReactJS

Here is the structure I have:

img {
    width: auto;
    height: 200px;
}

.cards {
    display: flex;
    justify-content: center;
    margin-top: 2em;
    width: 80%;
    flex-wrap: wrap;
}

.card {
    margin: 1em;
    box-shadow: 0 0 6px #000;
    object-fit: cover;
}

.info {
    padding: 1em;
    border-top: none;
}
<div class='cards'>
   <div class="card">
     <img src="https://picsum.photos/id/1004/5616/3744" alt="1004" />
     <div class="info">
       <h3>Greg Rakozy</h3>
       <div><small>https://unsplash.com/photos/SSxIGsySh8o</small></div>
     </div>
   </div>
</div>

When viewed on wide computers, the image is not aligning correctly within the '.card' block. https://i.stack.imgur.com/Hjw0E.jpg How can I adjust this to ensure proper alignment and display within the card element?

htmlcss

Answer №1

To start, you should set a maximum width for your main container:

.cards {
    display: flex;
    justify-content: center;
    margin-top: 2em;
    width: 80%;
    flex-wrap: wrap;
    max-width: 1440px; /* adjust as needed */
    margin-left: auto; /* center align the container */
    margin-right: auto; /* center align the container */
}

Next, ensure that each image spans the full width of its container:


.card {
    margin: 1em;
    box-shadow: 0 0 6px #000;
    object-fit: cover;
    flex: 0 0 25%; /* each card occupies 25% width */
}

img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

Answer №2

  1. To achieve the desired result, you can place those images within a div.img-container and define the width and height of the div as follows:

    .img-container { width: 100%; height: // adjust accordingly; } Then, nest the image inside the .img-container and set its width to 100%.

.container {
  width: 350px;
  height 350px;
  border: 2px solid black;
  border-radius: 5px;
}

.container .img-container {
  width: 100%;
  height: 200px;
}

.container .img-container img {
  width: 100%;
  height: 100%;
}

.container .card-info {
  width: 100%;
  height: auto;
}
<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/200">
  </div>
  <div class="card-info">
    <h5>Title</h5>
    <small>Your link here</small>
  </div>
</div>

  1. Alternatively, you can set the image's width to 100% and height to auto.

Answer №3

Include these styles in the .card CSS class:

width: 100%;
height: auto;

If you want to make images responsive using CSS, try searching for tutorials on Google. This topic is not specific to React.

Answer №4

.rectangle {
size: full;
dimension: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...

htmlcss

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

htmltwitter-bootstrapcssflexbox

Appearing text dialogue

Can you tell me the name of the box that appears on top of a webpage? A couple of examples include: Facebook photos - It dims the background webpage and opens a separate pop-up to display pictures. Advertisements - The box that typically requires clickin ...

htmlcsspopup

The utilization of local storage within Backgridjs

I am creating an app using Backbone.js (Marionette Framework) along with additional functionalities like Backgrid, Backbone local storage, Backbone Radio, epoxy, and Backbone relational model. Encountered Problem: An issue arises when utilizing the local ...

jqueryhtmlbackbone.jslocal-storagebackgrid

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

javascriptjqueryhtmlcssdatatable

Using html-mode in emacs to create a hyperlink

My image src text in emacs has become clickable. I would like to have plain text instead. How can I disable this feature? <img src="index_new_menus_files/menu_bg_2.gif" alt="" border="0" height="55" width="150"> Instead, I want it to be: <img s ...

htmlemacs

Creating a Sleek MenuBar in JavaFX

At the top of my BorderPane, I have added a MenuBar containing a "File" Menu and a "Close" MenuItem: I want to make it appear thinner like the MenuBars in most software applications, similar to the image below: It seems like a simple task, but as a begin ...

javacssjavafxmenubar

Creating a text input with a CSS gradient

Can the text color of an input be set as a gradient? I came across this method for regular static text but it doesn't seem to work for inputs: h1 { font-size: 72px; background: -webkit-linear-gradient(to right, rgb(66, 251, 227), rgb(43, 43, 2 ...

htmlcss

Learn how to incorporate a newly created page URL into a customized version of django-oscar

Just starting out with django-oscar and trying to set up a new view on the page. I've successfully created two pages using django-oscar dashboard, https://ibb.co/cM9r0v and added new buttons in the templates: Lib/site-packages/oscar/templates/osca ...

pythonhtmldjangopython-3.xdjango-oscar

Converting a data type into a CSS format

Currently, I am in the process of creating a table and would like to implement a 4-color scheme randomly selected from a pool of 10 schemes. Below is my CSS/PHP code: <?php header('Content-type: text/css'); // 0 grey $color00 = '#95 ...

phpcsscasting

How to make a div stretch to full browser height using CSS and jQuery

I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...

jqueryhtmlcss

How to retrieve a variable from an object within an array using AngularJS code

I recently started learning TypeScript and AngularJS, and I've created a new class like the following: [*.ts] export class Test{ test: string; constructor(foo: string){ this.test = foo; } } Now, I want to create multiple in ...

javascripthtmlarraysangulartypescript

What is the reason behind loading two srcset images?

When it comes to creating responsive web templates, I make use of the srcset attribute in order to load different images based on the current viewport size. This has been working well overall. However, in production mode, the images are fetched from a Digi ...

htmlimageperformanceresponsive-imagessrcset

Connecting a PHP file to an HTML file without using Ajax may seem challenging, but it

When designing a web page that involves an HTML form for user input to be processed by PHP and then displayed back on the page as another HTML form, how should this process be approached? For example, if I have an index.html file with the initial form, wh ...

phphtml

Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Three news articles are displayed below, each with its own image. The issue is that the text in the articles consists of quotes of varying sizes, causing them to not align properly. Adding a fixed height in pixels solves the alignment problem on the Deskto ...

htmlcssbootstrap-4

`Cannot locate the CSS file on my local server`

My Node.js application uses the Express.js framework, and I am attempting to execute the following code: app.use('/public', express.static(path.join(__dirname,'public'))); However, I encountered the following error message: The CSS ...

cssnode.jsexpress

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

Creating a textbox with pre-filled content

Seeking assistance with a Java compiler app I am developing through phonegap. Need help setting the default Java Class name in a textarea without it disappearing. This is what I have: <div> <label for="source">Source Code:</label> ...

javascripthtmltextarea

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

I'm having trouble with checking if the textbox is empty in my form. Every time I try to submit, instead of receiving an alert message saying "Firstname is empty," I get a message that says "Please fill out filled." ('#submit').click(func ...

javascriptjqueryhtmlformstextbox