CSS图片大小，如何填充，但不拉伸(stretch)？

Question

我有一张图片，我想给它设置一个特定的宽度和高度(以像素为单位)

但如果我使用 css (width:150px; height:100px) 设置宽度和高度，图像将被拉伸(stretch)，并且可能很难看。

如何使用 CSS 填充特定尺寸的图像，并且不拉伸(stretch)它？

填充拉伸(stretch)图片示例:

原始图片:

拉伸(stretch)图像:

填充图像:

请注意，在上面的填充图像示例中:首先，图像被调整为 150x255(保持宽高比)，然后，它被裁剪为 150x100。

Answer 1

您可以使用 css 属性 object-fit . (“设置被替换元素的内容，例如 <img> 或 <video>，应该如何调整大小以适应其容器。”)

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

See example here

有一个用于 IE 的 polyfill:https://github.com/anselmh/object-fit

相关: object-position (指定元素内容在其框内的对齐方式。)