How to set image size dynamically in ReactJS? - html

Question

I have structure like this:
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>
on computers with long width image is rendered a little wrong.
how can I fix this so that it displays correctly, i.e. sticks to the '.card' block?

Answer 1

First you need to limit the width of you main container:
.cards {
display: flex;
justify-content: center;
margin-top: 2em;
width: 80%;
flex-wrap: wrap;
max-width: 1440px; /* whatever you desire */
margin-left: auto; /* center the container */
margin-right: auto; /* center the container */
}
Then each image should take 100% for it's container:
.card {
margin: 1em;
box-shadow: 0 0 6px #000;
object-fit: cover;
flex: 0 0 25%; /* each card will be 25% width */
}
img {
width: 100%;
height: 200px;
object-fit: cover;
}

Answer 2

Adding those to .card class
width: 100%;
height: auto;
Google how to make image responsive with css, it's not related to React.

Answer 3

.card {
width: 100%;
height: auto;
}

Answer 4

You can either put those images in a div.img-container and set the div width & height like this.
.img-container {
width: 100%;
height: // as you want;
}
and then put that image inside .img-container and set the image 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>
and either set image width 100% and height auto.