css - CSS图像大小，如何填充，不拉伸？(CSS Image size, how to fill, not stretch?)

Question

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。)

  ask by Mahdi Ghiasi translate from so

Answer 1

You can use the css property object-fit .

(您可以使用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;
}

See example here

(见这里的例子)

There's a polyfill for IE: https://github.com/anselmh/object-fit

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