Within a column in a row, I have two images per row. Users can upload their own images without them being cropped to specific dimensions. The images are uploaded at their original dimensions.
However, on the frontend, this is causing some images to appear with varying heights which makes the layout look messy. I need all images in each row to have equal height without distorting or cropping the width of the image.
<div class="row">
<div class="mb-3 col-md-6"><a href="/some-link">
<figure class="meal-photo figure">
<h1>Pic 1</h1><img
src="http://localhost:3000/userimg1.jpg"
class="img-fluid">
</figure>
</a></div>
<div class="mb-3 col-md-6"><a href="/some-link">
<figure class="meal-photo figure">
<h1>Pic 2</h1><img
src="http://localhost:3000/userimg2.jpg"
class="img-fluid">
</figure>
</a></div>
<div class="mb-3 col-md-6"><a href="/some-link">
<figure class="meal-photo figure">
<h1>Pic 3</h1><img
src="http://localhost:3000/userimg3.jpg"
class="img-fluid">
</figure>
</a></div>
<div class="mb-3 col-md-6"><a href="/some-link">
<figure class="meal-photo figure">
<h1>Pic 4</h1><img src="http://localhost:3000/userimg4.jpg"
class="img-fluid">
</figure>
</a></div>
</div>
.img-fluid {
max-width: 100%;
height: auto;
}
No specific styles have been set for meal-photo yet.