CSS图像大小，如何填充，但不拉伸？

Question

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

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

如何使用 CSS 将图像 填充 到特定大小，而 不是拉伸 它？

填充和拉伸图像的示例：

原图：

拉伸图像：

填充图像：

请注意，在上面的填充图像示例中：首先，图像被调整为 150x255（保持纵横比），然后将其 裁剪 为 150x100。

原文由 Mahdi Ghiasi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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" />

在此处查看示例

IE 有一个 polyfill： https ://github.com/anselmh/object-fit

相关： object-position （指定元素内容在其框内的对齐方式。）

原文由 afonsoduarte 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想使用图像作为 CSS 背景，有一个优雅的解决方案。只需在 background-size CSS3 属性中使用 cover 或 contain 即可。

 .container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

 <div class="container"></div>​

cover 会给你一个放大的图像， contain 会给你一个缩小的图像。两者都将保留像素纵横比。

http://jsfiddle.net/uTHqs/ （使用封面）

http://jsfiddle.net/HZ2FT/ （使用包含）

根据 Thomas Fuchs 的快速指南，这种方法的优点是对 Retina 显示器友好。

值得一提的是，浏览器对这两个属性的支持 不包括 IE6-8。

原文由 Marcelo De Polli 发布，翻译遵循 CC BY-SA 4.0 许可协议