Javascript 在CSS中保持纵横比的同时调整图像到容器的大小？

我有一堆不同（未知）维度的图像

我想把这些图像放到一个div中，让它们自动符合div的尺寸，同时保持它们的纵横比

换句话说，如果图像的宽度大于高度，则宽度将为100%，高度将相应缩放。如果图像高于宽度，则高度将为100%，宽度将相应缩放

在纯css中有什么方法可以做到这一点吗

---

谢谢

我通过我的多媒体资料设置完成了以下操作：

.ScaledImg {
    max-width:100%:
    max-height:100%;
}

img会根据此进行缩放以适应其父级/容器的尺寸，同时保持其纵横比。除了IMG，我没有尝试过其他任何东西，但对我来说效果很好。不需要

宽度

或

高度

声明。

尝试以下操作：

<style>
    .fit_image img {
        max-width: 100%;
        max-height: 100%;
    }
    .fit_image {
        width: 400px;
        height: 200px;
    }
</style>

<div class="fit_image">
     <img src="/path/to/image.jpg">
</div>

.fit_图像img{
最大宽度：100%；
最大高度：100%；
}
.fit_图像{
宽度：400px；
高度：200px；
}

在图像上使用css属性和将使您到达需要的位置

小提琴

HTML

<div>    
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/>
</div>
<div>    
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/>
</div>

---

基于@iambriansreed fiddle，
当图像小于容器时，使用缩放

div img {
    zoom: 10;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

---

这将一直工作到图像在一个轴上达到其真实大小的100%。有没有办法将其大小调整到100%以上？当我增加div的大小时，这是不起作用的。请参阅。有没有办法把它拉伸到合适的宽度或高度。？

div img {
    zoom: 10;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}