I have a collection of images, most of which have an aspect ratio of 4:3. Unfortunately, there are a few outliers that cannot be cropped without losing important details.
My goal is to showcase all the photographs, including the odd-sized ones, in uniform bounding boxes of the same size for each photo. The dimensions of this bounding box are dictated by a div with the class col-md-4:
<div class="row">
<div class="col-md-4">
<!- the image goes here: -->
<img class="img img-responsive" src=" ... " />
</div>
<div class="col-md-8">
<!- other content -->
</div>
</div>
The images with a 4:3 aspect ratio display nicely within these consistent dimensions, regardless of their actual sizes (e.g., one might be 1024x768 while another is 800x600).
For images that are "too wide," I envision them being displayed as follows (with gray bars representing the background):
https://i.sstatic.net/ACs3z.png
And for images that are "too tall," they should appear like this:
https://i.sstatic.net/jqd2G.png
In essence, I want each non-standard image to adjust its height or width within the bounding box based on whether it's too tall or too wide. Is this achievable using Bootstrap and CSS?
It's worth noting that currently, the bounding div has the same width set by Bootstrap for every image, with the height determined by the image's aspect ratio. When all photos adhere to the 4:3 ratio, the heights are also consistent. Therefore, for non-standard images, the height needs to be locked at three-fourths of the display width.