我的网站在点击一个主题后包含一个 img ，这可能会在另一个 img 点击 . 图像源本身并不大，不适合1080 x 1920显示器 . 如果用户有大屏幕或使用缩小浏览器功能，我希望 img 放大，以保持父级的尺寸 .

Here is a Fiddle on how it should look like，改编自http://jsfiddle.net/xwrvxser/1/

这里的小提琴有100％的高度但是最大化img高度并创建一个拉伸的img元素，如背景颜色红色所示，这就是我试图避免的，没有红色拉伸img只是保持宽高比，没有像素更多 . （尝试调整Fiddle窗口的大小，你会看到img拉伸红色） . this is what happens when the parent size changes .

With all the img topics on Stackoverflow没有答案只是 img 没有't deform but maintains the parent div dimensions keeping its own Aspect ratio and doesn'变形 .

对于我的网站，重要的是我可以点击ON和AROUND img，所以 background-image: 和 100% 值不是一个选项 . 在小提琴示例您可以看到 img 正在扩展到"Portrait Div"

img 或父级都没有设置的高度或宽度 . （没有javascript只是纯粹的CSS请） .

.img1 {
    height: auto;
    width:100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #966;
}
.img2 {
    height: 100%;
    width:auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #966;
}


.portrait {
    height: 60vh;
    width: 15vw;
    float:left;

}

.landscape {
    height: 15vw;
    width: 60vh;
    float:left;

}

div {
    padding:10px;
    margin:10px;
    background: #8591aa;
}

Portrait Div
<div class="portrait">
    <img class="img1" src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


<br style="clear: both;">
<br style="clear: both;">

Landscape Div
<div class="landscape">
    <img class="img2" src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
html css