Utilizing the object-fit Property for Responsive Design
To achieve a responsive design, I incorporated the use of display: flex; and object-fit: cover; properties. I believe that the object-fit property applied directly to the image is crucial in ensuring that your images maintain their quality across various screen resolutions.
It is worth noting the utilization of object-position: center;, which ensures that the resizing focuses on the center of the image at all times.
index.html
<div class="foo">
<div class="bar">
<img src="https://picsum.photos/200/300" alt="">
<div>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/200" alt="">
<div>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/200/700" alt="">
<div>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/400" alt="">
<div>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
</div>
style.css
body {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
.foo {
width: 100%;
display: flex;
gap: 20px;
}
.bar {
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bar > img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
h4 {
color:#9ccf74;
}
.bar > div {
padding: 10px;
height: 100px;
}