CSS图片大小，如何填充，不能伸缩？
我有一个图像，我想设置一个特定的宽度和高度（以像素为单位）
但是，如果我使用css（ width:150px; height:100px ）设置宽度和高度，图像将被拉伸，并且可能是丑陋的。
如何使用CSS 填充图像到一个特定的大小，而不是伸展它？
填充和拉伸图像示例：
原始图像：
拉伸图像：
填充图像：
请注意，在上面的填充图像示例中：首先，将图像调整为150×255（保持纵横比），然后裁剪为150×100。
如果你想使用图像作为CSS背景，那么有一个优雅的解决scheme。 只需使用cover或contain在background-size CSS3属性。
<div class="container"></div> .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%; }
虽然cover会给你一个放大的图像， contain会给你一个缩小的图像。 两者都将保持像素高宽比。
http://jsfiddle.net/uTHqs/ （使用封面）
http://jsfiddle.net/HZ2FT/ （使用包含）
根据Thomas Fuchs的快速指南，这种方法的优点是对Retina显示器友好。 http://cl.ly/0v2u190o110R
值得一提的是，浏览器对这两个属性的支持都不包括IE6-8。 http://www.quirksmode.org/css/background.html
你可以使用CSS属性object-fit 。
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" /> .cover { object-fit: cover; width: 50px; height: 100px; }
看这里的例子
有一个IE的填充： https ： //github.com/anselmh/object-fit
唯一真正的方法是在图像周围overflow:hidden一个容器并使用overflow:hidden ：
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container { width: 300px; height: 200px; display: block; position: relative; overflow: hidden; } .container img { position: absolute; top: 0; left: 0; width: 100%; }
这是一个CSS的痛苦做你想要的和中心的形象，有一个在jquery快速修复，如：
var conHeight = $(".container").height(); var imgHeight = $(".container img").height(); var gap = (imgHeight - conHeight) / 2; $(".container img").css("margin-top", -gap);
CSS解决scheme没有JS和没有背景图片：
方法1“margin auto”（IE8 + – NOT FF！）：
div{ width:150px; height:100px; position:relative; overflow:hidden; } div img{ position:absolute; top:0; bottom:0; margin: auto; width:100%; }
<p>Original:</p> <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> <p>Wrapped:</p> <div> <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> </div>
其实这只是从这个问题最高的答案 （而不是被接受的答案）中推导出来的。
有两个区别：
-
不需要在
image元素上提供height和width属性，因为它们将被样式覆盖。
所以写这样的东西就足够了。<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" /> -
提供
width:100%的风格。
如果您使用引导程序并希望图像伸展所有可用宽度，这会很有帮助。
指定height属性是可选的，但在我的情况下，这是件好事。.cover { object-fit: cover; width: 100%; height: 300px; /* optional, but in my case it was good */ }
另一种解决scheme是将图像放在具有所需宽度和高度的容器中。 使用这种方法，您不必将图像设置为元素的背景图像。
然后你可以用一个img标签来做到这一点，只需在元素上设置最大宽度和最大高度。
CSS：
.imgContainer { display: block; width: 150px; height: 100px; } .imgContainer img { max-width: 100%; max-height: 100%; }
HTML：
<div class='imgContainer'> <img src='imagesrc.jpg' /> </div>
现在，当您更改容器的大小时，图像将自动增大，尽可能大，而不会超出边界或扭曲。
如果要垂直和水平居中放置图像 ，可以将容器CSS更改为：
.imgContainer { display: table-cell; width: 150px; height: 100px; text-align: center; vertical-align: middle; }
这里是一个JS小提琴http://jsfiddle.net/9kUYC/2/
build立@Dominic Green的答案使用jQuery，这是一个解决scheme，应该是工作的图像，要么是比他们更高或更高的广泛。
有可能是一个更优雅的JavaScript的方式，但这是行得通的。
function myTest() { var imgH = $("#my-img").height(); var imgW = $("#my-img").width(); if(imgW > imgH) { $(".container img").css("height", "100%"); var conWidth = $(".container").width(); var imgWidth = $(".container img").width(); var gap = (imgWidth - conWidth)/2; $(".container img").css("margin-left", -gap); } else { $(".container img").css("width", "100%"); var conHeight = $(".container").height(); var imgHeight = $(".container img").height(); var gap = (imgHeight - conHeight)/2; $(".container img").css("margin-top", -gap); } } myTest();
尝试这样的： http : //jsfiddle.net/D7E3E/4/
使用溢出容器：隐藏
编辑：@多米尼克绿色打败了我。
我帮助构build了一个名为Fillmore的jQuery插件，它处理支持它的浏览器中的background-size: cover ，并为那些不支持的background-size: cover填充。 看一看！
这将填充图像到一个特定的大小，不拉伸或裁剪它
img{ width:150px; //your requirement size height:100px; //your requirement size /*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/ object-fit:scale-down; }
