How to make image resize with media query? - html

Question

How would I make it so the image resizes properly when viewed on smaller screens. Right now, the image is over the container when viewed on smaller screens. There are also small gaps between the top/left of the container and the image. Would I have to resize the image in the media query or expand the width of my container in the media query?
.container {
width: 88%;
margin: 50px auto;
margin-top: 0px;
}
.heading {
text-align: center;
font-size: 30px;
margin-bottom: 50px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.card {
width: 30%;
background: #fff;
border: 1px solid #ccc;
margin-bottom: 50px;
}
.image {
width: fit-content;
height: fit-content;
}
.card-body {
padding: 30px 10px;
text-align: left;
font-size: 18px;
}
.card-body .btn {
display: block;
color: #fff;
text-align: center;
background: black;
margin-top: 30px;
text-decoration: none;
padding: 10px 5px;
}
#media screen and (max-width: 1000px) {
.card {
width: 40%;
}
.heading {
text-align: auto;
}
.card-header {
margin: auto;
}
.image {
width: fit-content;
height: fit-content;
}
}
#media screen and (max-width: 620px) {
.container {
width: 100%;
}
.heading {
padding: 20px;
font-size: 20px;
text-align: auto;
}
.card {
width: 80%;
}
.image {
width: fit-content;
height: fit-content;
}
}
<div class="container">
<div class="heading">
<h1>Latest Posts</h1>
</div>
<div class="row">
<div class="card">
<div class="image">
<img src="https://via.placeholder.com/1920x1080.jpg">
</div>
<div class="card-body">
<p>
Text Here
</p>
Read more
</div>
</div>

Answer 1

I typically put width: 100%; on images in my projects and height: auto this way the image will be more responsive and scale up and down. You can reduce the width for the smaller media query if you want an even smaller image (width: 85%; for example) or I would probably personally end up reducing the width of the container to get the desired result.

Answer 2

1st: Remove your CSS for the class .image
2nd: Add this CSS line to the base-css (not within the media queries):
img {
object-fit: contain;
width: 100%;
}
What will that do?
object-fit: contain will keep the image aspect ratio while width: 100% will cause the image to fit exactly the given space. The height is set automatically according to the width while it maintain the image aspect ratio as mentioned above.
.container {
width: 88%;
margin: 50px auto;
margin-top: 0px;
}
.heading {
text-align: center;
font-size: 30px;
margin-bottom: 50px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.card {
width: 30%;
background: #fff;
border: 1px solid #ccc;
margin-bottom: 50px;
}
.image {
width: fit-content;
height: fit-content;
}
.card-body {
padding: 30px 10px;
text-align: left;
font-size: 18px;
}
.card-body .btn {
display: block;
color: #fff;
text-align: center;
background: black;
margin-top: 30px;
text-decoration: none;
padding: 10px 5px;
}
img {
object-fit: contain;
width: 100%;
}
#media screen and (max-width: 1000px) {
.card {
width: 40%;
}
.heading {
text-align: auto;
}
.card-header {
margin: auto;
}
}
#media screen and (max-width: 620px) {
.container {
width: 100%;
}
.heading {
padding: 20px;
font-size: 20px;
text-align: auto;
}
.card {
width: 80%;
}
}
<div class="container">
<div class="heading">
<h1>Latest Posts</h1>
</div>
<div class="row">
<div class="card">
<div class="image">
<img src="https://via.placeholder.com/1920x1080.jpg">
</div>
<div class="card-body">
<p>
Text Here
</p>
Read more
</div>
</div>