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

本文翻译自：CSS Image size, how to fill, not stretch?

I have an image, and I want to set it a specific width and height (in pixels) 我有一个图像，我想设置一个特定的宽度和高度（以像素为单位）

But If I set width and height using css ( width:150px; height:100px ), image will be stretched, and It may be ugly. 但如果我使用css（ width:150px; height:100px ）设置宽度和高度，图像将被拉伸，它可能是丑陋的。

How to Fill images to a specific size using CSS, and not stretching it? 如何使用CSS 将图像填充到特定大小，而不是拉伸它？

Example of fill and stretching image: 填充和拉伸图像的示例：

Original Image: 原始图片：

Stretched Image: 拉伸图像：

Filled Image: 填充图片：

Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it cropped to 150x100. 请注意，在上面的填充图像示例中：首先，将图像调整为150x255（保持纵横比），然后将其裁剪为150x100。

---

#1楼

参考：https://stackoom.com/question/nKfh/CSS图像大小-如何填充-不拉伸

---

#2楼

The only real way is to have a container around your image and use overflow:hidden : 唯一真正的方法是在图像周围overflow:hidden一个容器并使用overflow:hidden ：

HTML HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

It's a pain in CSS to do what you want and center the image, there is a quick fix in jquery such as: 要做你想做的事情并使图像居中，这是一个很痛苦的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://jsfiddle.net/x86Q7/2/

---

#3楼

Try something like this: http://jsfiddle.net/D7E3E/4/ 尝试这样的事情： http ： //jsfiddle.net/D7E3E/4/

Using a container with overflow: hidden 使用溢出的容器：隐藏

EDIT: @Dominic Green beat me. 编辑：@Dominic Green打败了我。

---

#4楼

If you want to use the image as a CSS background, there is an elegant solution. 如果您想将图像用作CSS背景，那么就有一个优雅的解决方案。 Simply use cover or contain in the background-size CSS3 property. 只需使用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%;
}​

While cover will give you a scaled up image, contain will give you a scaled down image. cover会给你一个放大的图像， contain会给你一个缩小的图像。 Both will preserve the pixel aspect ratio. 两者都将保留像素长宽比。

http://jsfiddle.net/uTHqs/ (using cover) http://jsfiddle.net/uTHqs/ （使用封面）

http://jsfiddle.net/HZ2FT/ (using contain) http://jsfiddle.net/HZ2FT/ （使用包含）

This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide. 根据Thomas Fuchs的快速指南，这种方法具有对Retina显示器友好的优点。

It's worth mentioning that browser support for both attributes excludes IE6-8. 值得一提的是，浏览器对这两个属性的支持不包括IE6-8。

---

#5楼

I helped build a jQuery plugin called Fillmore , which handles the background-size: cover in browsers that support it, and has a shim for those that don't. 我帮助构建了一个名为Fillmore的jQuery插件，它在支持它的浏览器中处理background-size: cover ，并为那些不支持它的浏览器提供了一个垫片。 Give it a look! 看看吧！

---

#6楼

Building off of @Dominic Green's answer using jQuery, here is a solution that should work for images that are either wider than they are high or higher than they are wide. 使用jQuery建立@Dominic Green的答案，这里的解决方案应该适用于宽度高于或高于宽度的图像。

http://jsfiddle.net/grZLR/4/ http://jsfiddle.net/grZLR/4/

There is probably a more elegant way of doing the JavaScript, but this does work. 可能有一种更优雅的方式来做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();