是否有与 background-size:cover 和 contains 等效的图像元素? [英] Is there an equivalent to background-size: cover and contain for image elements?

问题描述

我有一个包含许多页面和不同背景图片的网站，我从 CSS 中显示它们，例如:

I have a site with many pages and different background pictures, and I display them from CSS like:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

但是，我想使用 <img> 元素在一个页面上显示不同的(全屏)图片，并且我希望它们具有与上述 background-image 相同的属性:cover; 属性(图片无法从 CSS 中显示，必须从 HTML 文档中显示).

However, I want to show different (fullscreen) pictures on one page using <img> elements, and I want them to have the same properties as the above background-image: cover; property (the images cant be displayed from CSS, they must be displayed from the HTML document).

通常我使用:

div.mydiv img {
    width: 100%;
}

或者:

div.mydiv img {
    width: auto;
}

使图片完整和响应.但是，当屏幕太窄时，图片会缩小太多(width: 100%)，并在底部屏幕中显示主体的背景颜色.另一种方法，width: auto;，只使图像全尺寸，不响应屏幕尺寸.

to make the picture full and responsive. However the picture shrinks too much (width: 100%) when the screen gets too narrow, and shows the body's background-color in the bottom screen. The other method, width: auto;, only makes the image full size and does not respond to the screen size.

有没有一种方法可以像 background-size:cover 那样显示图像?

Is there a way to display the image the same way that background-size: cover does?

推荐答案

Solution #1 - object-fit 属性(缺乏 IE 支持)

只需在 img 上设置 object-fit:cover; 即可.

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="http://lorempixel.com/1500/1000" />

参见 MDN - 关于 object-fit:cover:

被替换的内容被调整大小以保持其纵横比，同时填充元素的整个内容框.如果对象的纵横比与其框的纵横比不匹配，则对象将是剪裁合身.

The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

对于object-fit:contain:

被替换的内容被缩放以保持其纵横比，同时适合元素的内容框.使整个对象填充该框，同时保留其纵横比，因此该对象将被信箱化"，以保持其纵横比.如果它的纵横比与框的纵横比不匹配.

The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.

此外，请参阅 此 Codepen 演示，其中比较了 object-fit: cover 应用于图像，background-size: cover 应用于背景图像

Also, see this Codepen demo which compares object-fit: cover applied to an image with background-size: cover applied to a background image

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}

<img src="http://placehold.it/1500x1000" />

这篇关于是否有与 background-size:cover 和 contains 等效的图像元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！