这里有一个解决方案：

object-fit: cover;
width: 100%;
height: 250px;

您可以调整宽度和高度以满足您的需要，对象拟合属性将为您进行裁剪。

有关对象拟合属性和兼容性表的可能值的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

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

backgroundsize属性仅为ie>=9，但如果这对您来说很好，您可以使用带有背景图像的div并设置backgroundsize：contain：

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

现在，您只需将div大小设置为所需的大小，图像不仅保持其纵横比，还将在div中垂直和水平集中。不要忘记在css上设置大小，因为div本身没有width/height属性。

这种方法与setecs答案不同，使用这种方法，图像区域将是恒定的，并由您定义（根据div大小和图像纵横比，水平或垂直地留出空格），而setecs回答将为您提供一个与缩放图像大小完全相同的框（没有空格）。

编辑：根据MDN背景大小文档，您可以使用专有过滤器声明模拟IE8中的背景大小属性：

虽然Internet Explorer 8不支持背景大小属性，但可以使用非标准的-ms过滤器函数模拟其某些功能：

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

与这里的一些答案非常相似，但在我的案例中，我的图像有时更高，有时更大。

这种风格就像一种魅力，确保所有图像都使用所有可用空间，保持比例而不是剪切：

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

只需将高度属性替换为纵横比属性。

国际货币基金组织{最大宽度：500px；纵横比：900/600；}<img src=“big_image.png”width=“900”/>

纵横比属性不是必需的，但可以防止图像布局偏移。

Firefox 71+（2019-12-03）和Chrome 79+（2019-2-10）支持将IMG元素的宽度和高度HTML属性内部映射到新的纵横比CSS属性（该属性本身还不能直接使用）。

计算出的纵横比用于在加载图像之前为图像预留空间，只要计算出的宽高比等于图像的实际纵横比，就可以在加载图像后防止页面“跳转”。

要使其工作，必须通过CSS将两个图像维度之一覆盖为自动值：

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

在该示例中，即使图像尚未加载，并且作为最大宽度：100%的结果，有效图像宽度小于1280，也保持16:9（1280:720）的纵横比。

另请参阅相关的Firefox错误392261。