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

EN

您可以使用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有一个多填充：https://github.com/anselmh/object-fit

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

如果您想要使用该图像作为CSS背景，有一个优雅的解决方案。只需在cover CSS3属性中使用background-size或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/ (使用包含)

这种方法的优点是对托马斯·福克斯的快速向导。中的Retina显示很友好。

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

基于@afonsoduarte接受答复.的增强

如果您使用的是引导

有三个不同之处：

1. 在样式上提供width:100%。 如果您使用的是引导，并且希望映像扩展所有可用宽度，这将很有帮助。
2. 指定height属性是可选的，您可以根据需要删除/保留它 .cover { object-fit: cover；宽度: 100%；/*height: 300 it；可选，您可以删除它，但在我的示例中，它是很好的*/ }
3. 顺便说一句，不需要在height元素上提供image和width属性，因为它们将被样式覆盖。 所以写这样的东西就足够了。