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 are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

When editing html files in Vim, the javascript indent filetype plugin is sourced unexpectedly

After experimenting with my vim settings, I noticed an unexpected behavior. When editing html files in vim, both the indent/javascript.vim and indent/html.vim filetype plugins seem to be sourced simultaneously. Is this intentional or a bug? How can I ensur ...

htmlvimindentationvim-pluginneovim

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

phphtml

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui

Discrepancy in Angular Material Buttons with theme design

I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I a ...

cssangularangular-material

Transfer information from a click event to a jQuery function

Having some trouble passing a C# list parameter to a jQuery method using onclick. It seems like the brackets [] and special characters in the string values are causing issues. For example, a string in the list might look like "*abc/def-". Any help would b ...

htmljqueryonclick

Using JavaScript to inject PHP variables into multiple <span> elements

I have been searching for a similar query without any luck. Currently, I am attempting to display the number of Twitter/Facebook/RSS followers within a <span>....</span> in my sidebar. To retrieve the follower counts, I am using some PHP scrip ...

phpjqueryhtml

Mixing elements from the entire webpage

My goal is to create a cohesive look for the entire page by applying a background gradient to all layers. #myDIV { width: 400px; height: 400px; background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%); } .bl ...

htmlcss

Guide to deactivating scrolling on a specific element using jQuery

Can anyone provide a solution for disabling scroll on the window but still allowing scrolling within a text area? I attempted to use the following code, but it ended up disabling everything entirely: $('html, body').css({ overflow: 'hid ...

javascriptjqueryhtmlcss

The window.open function is creating a new tab using the specified origin or URL

I have a button within an iframe on the webpage "loclahost:3000". When this button is clicked, it should open a new tab with the URL "www.google.com". However, instead of opening the desired URL, the new tab opens with the following incorrect URL: "http:// ...

javascripthtml

Angular is used to send an HTTP GET request

I'm seeking assistance with implementing a get and put request in Angular. I understand how to initiate a get or put request when a button is clicked, by binding the request to the button itself. However, I am now looking for a way to trigger a get re ...

htmlangulartypescript

Ensuring input boxes are neatly positioned underneath one another, regardless of the chosen font size

Is there a way in CSS to ensure that these input boxes are always aligned below each other, regardless of font family, size, or window movement by the user? https://i.stack.imgur.com/Zbadh.png Currently, I am using the following approach: tab1 { paddi ...

htmlcss

Set the first link in a menu to be highlighted as active using jquery

In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link ...

jqueryhtmlcss

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed ...

javascriptjquerycssangularjstwitter-bootstrap

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

How can I retain the selected values in a form after it is submitted? My current code functions correctly when only one value is selected, but does not maintain all selected values when multiple are chosen simultaneously. Any assistance would be apprecia ...

javascriptphphtmlforms

How to Display Full Lightbox Image on both Tall and Short Height Browsers

Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...

htmlcsssasslightbox

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

htmlcssruby-on-railsrubysvg

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

Oxygen-style with a sleek, shadow-free frame

Currently, I'm utilizing the qtoxygen style and I am curious if anyone knows how to remove the shadow frame on QPlainTextEdit. Even after attempting to customize the CSS with { border: none }, the shadow continues to be displayed. ...

cssqt