如何使用img标签覆盖div(就像background-image一样)? [英] How to cover a div with an img tag (like background-image does)?

问题描述

如此处所述我正在尝试将图像覆盖在div中.仅需这些简单的代码，我就可以通过background-image:

As discussed here I am trying to get an image to be covered within a div. With just these simple lines I was able to achieve this via background-image:

div{
    width: 172px;
    height: 172px;
    border-style: solid;
    background-image: url('../images/img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

结果是图像在div中居中并调整了大小，使其适合div的宽度或高度(取决于图像是否宽). 现在，我想在div中使用image标签实现相同的结果.

In result the image was centered within the div and was resized so it would fit the width or the height of the div (depending if the image was wide or not). Now I would like to achieve the same result with the image tag within the div.

<div>
  <img src="images/img1.jpg"/>
</div>

有什么办法可以通过普通的CSS来解决这个问题?

Is there any way to get through this with plain CSS?

推荐答案

使用object-fit:cover不会丢失比率.

div {
  border: black solid;
  width: 400px;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

<div>
  <img src="//lorempixel.com/100/100" />
</div>

注意::这是IE中不支持的

NOTE: this is not supported in IE

PS -对于那些喜欢投票(并且正在投票)的人，仅出于在IE中不起作用" 的简单原因(顺便说一句) ，它是一种过时的浏览器，因此请教育您的客户至少使用升级的浏览器EDGE)，那里有一些object-fit填充可以使object-fit正常工作.

P.S. - For those who like to downvote (and are downvoting) just for the simple reason that "It doesn't work in IE" (by the way, it is an outdated browser, so please educate your clients to use at least the upgraded browser EDGE), there are a few object-fit polyfills out there that will make object-fit work.

以下是一些示例:

• object-fit-images
• constancecchen/object-fit-pollyfill
• 为CSS object-fit属性设置填充

• object-fit-images
• constancecchen /object-fit-pollyfill
• Polyfill for CSS object-fit property

或者，如果您认为仅针对该属性使用polyfill可能会导致杀伤力，那么以下简单的代码段将使其在IE中起作用.

Or if you think its an overkill using a polyfill just for that property, here is simple snippet that will make this work in IE.

您可以使用简单的JS代码段检测是否支持object-fit，然后将img替换为svg

You can use a simple JS snippet to detect if the object-fit is supported and then replace the img for a svg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

这篇关于如何使用img标签覆盖div(就像background-image一样)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！