国际货币基金组织{显示：块；最大宽度：230px；最大高度：95px；宽度：自动；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“http://i.stack.imgur.com/aEEkn.png">

如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。

国际货币基金组织{显示：块；最大宽度：230px；最大高度：95px；宽度：自动；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“http://i.stack.imgur.com/aEEkn.png">

如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。

国际货币基金组织{最大宽度：80px；/*也适用于百分比值，如100%*/高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“https://i.stack.imgur.com/aEEkn.png"><p>假设HTML的作者故意想要高度为宽度值的一半，此CSS将忽略HTML作者的愿望，这可能是您想要的，也可能不是您想要的：</p><img width=“400”height=“200”src=“https://i.stack.imgur.com/aEEkn.png">

这里有一个解决方案：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

这将确保图像始终覆盖整个父对象（向下和向上缩放）并保持相同的纵横比。

https://jsfiddle.net/sot2qgj6/3/

如果你想用固定的宽度百分比，而不是固定的宽度像素来放置图像，这就是答案。

这在处理不同大小的屏幕时很有用。

诀窍是

使用padding top设置高度与宽度之间的距离。使用position:absolute将图像放入填充空间。使用最大高度和最大宽度确保图像不会覆盖父元素。使用display:block和margin:auto将图像居中。

我也评论了小提琴中的大部分技巧。

我还找到了其他方法来实现这一点。在html中不会有真实的图像，所以当我需要html中的“img”元素时，我个人更倾向于首选答案。

使用背景的简单csshttp://jsfiddle.net/4660s79h/2/

顶部有单词的背景图像http://jsfiddle.net/4660s79h/1/

使用位置绝对值的概念如下http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

只需将此添加到css中，它将自动收缩和扩展，并保持原始比例。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}