将img限制在div并保持宽高比？

Question

我试过了我能找到的所有东西。

我试图保持一个图像溢出它在里面的div。

我已经试过：对这些值的

div.row #whoPic { 
    object-fit: contain; 
    max-width: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    max-width: auto; 
    max-height: auto; 
    max-width: 300px; 
    max-height: 300px; 
} 

...和许多变化。

我也试过针对所有的img，以及非常精确的目标。

请帮我一把。在这里坚果。

Answer 1

事实上，这个问题之前已经被问过了。
这里：How do I auto-resize an image to fit a div container
这里：Make an image width 100% of parent div, but not bigger than its own width
这里：Contain an image within a div?
这里：How do I fit an image (img) inside a div and keep the aspect ratio?

与max-widthmax-height和均设定为100%限制图像。

.theContainer { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
} 
 

 
.theContainer img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="theContainer"> 
 
    <img src="https://placehold.it/200x200"> 
 
</div> 
 
<h3> The original image size is 200x200 </h3> 
 
<img src="https://placehold.it/200x200">