I have a unique container designed to showcase images with a fixed width of 100%. Here are my specific requirements:
- The image must maintain its original aspect ratio.
- If the image is wider, the width should be 100% and the height less than the designated
max-height. - If the image is taller, the height should be at the
max-heightlimit while the width is less than 100%.
In my scenario, the first two images display correctly. However, the third one poses an issue as either the width does not reach 100% or the height exceeds the max height limit.
How can I rectify this situation?
.container {
border: 1px solid black;
height: 200px;
width: 100%;
}
img {
max-width: 100%;
max-height: 200px;
width: auto;
display: block;
margin: auto;
}<div class="container">
<img src="https://i.sstatic.net/kZPXw.png" />
</div>
<div class="container">
<img src="https://i.sstatic.net/IfTIL.png" />
</div>
<div class="container">
<img src="https://www.gravatar.com/avatar/62345e20906dbccbf7e18f11ab4bd047?s=64&d=identicon&r=PG&f=1" />
</div>Feel free to experiment further here: https://jsfiddle.net/d425c1bh/2/