CSS图片大小，如何填充，不能拉伸？

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

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

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

填充和拉伸图像示例：

原始图像：

拉伸图像：

填充图像：

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

---

如果你想使用图像作为CSS背景，那么有一个优雅的解决方案。 只需使用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的polyfill：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);

http://jsfiddle.net/x86Q7/2/

链接地址: http://www.djcxy.com/p/15771.html

上一篇: CSS Image size, how to fill, not stretch?

下一篇: size work in IE?