Is there a method, using CSS alone, to adjust an image's height to fit its container while preserving aspect ratio and allowing the overflow of width to be concealed? It may seem like a complex set of requirements, but is it achievable? Essentially, I want the full height of the image to be shown, even if the width exceeds the container's limits (utilizing Bootstrap's grid system), with any excess width hidden. Currently, setting the height to 100% looks decent, but the image compresses from the sides to fit inside the container instead of overflowing and getting cropped. Setting the width to 100% causes it to fill the entire container, as it uses the container as the reference for 100%, not the photo’s aspect ratio. This is the issue that needs to be addressed.
Here is my current setup:
<div style="width:150px; height:150px; display:flex; flex-direction:column">
<img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden">
</div>In summary, I am seeking a way to maintain an image's aspect ratio, lock its height to match the container's height, and hide any excess width, enabling me to view as much of the picture as possible while still filling the container.
Extra credit if there is a means of determining which dimension is smaller and locking it to the relevant container dimension.