Display image original size, if possible, else shrink - css

Question

There are lots of questions on this general subject, but none that do what I need.
I need to present multiple images, each in a div of its own, but I have no prior knowledge of whether they're portrait, landscape, or low resolution. What I want to do is show them original size (and centered) if they will fit (i.e. I don't want to stretch a low-resolution image), but if they're larger than the div then shrink them appropriately according to their aspect ratio.
This sounds simple but I gave up with the img element, and solutions suggesting width:100%;height:auto; were neglecting the fact that this presumes a landscape image.
I started using background properties and had much more success. If I could make this work then it would have the added benefit that it worked with IE11 too. For instance:
background-image: url("http://example.jpg");
background-position:center center;
background-size: auto;
background-repeat: no-repeat;
works fine if the image is smaller than the div, but crops the image if the original size is too large.
Is there a way to scale the size appropriately in this case (as with background-size:contain), but display original size when possible?

Answer 1

I think you can achieve what you want with a combination of the two properties: max-width: 100% and max-height: 100%:
.container {
display: flex;
}
.item {
margin: 1rem;
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/150x150" />
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" />
</div>
<div class="item">
<img src="https://via.placeholder.com/200x300" />
</div>
</div>
1st item: image is smaller, keeps its original size.
2nd item: image is landscape, shrinked to fit.
3rd item: image is portrait, shrinked to fit.
Is this what you needed?