Question

我真的为这个问题感到羞耻，但我正在研究css“object-fit”，我知道它是一个“部分支持”属性，但我不能让它起作用，甚至在最后的firefox /铬版本。我知道也许我正在做一个愚蠢的错误，但我在互联网上搜索有一天试图找到解决方案，但我不能......我尝试与所有供应商合作......将标记减少到最小的表达式这个例子，但在任何浏览器中都没有发生。

任何人都知道我做错了什么？

<div>
    <img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
</div>

LookUp()

Answer 1

感谢LGSon和Oriol。

为图像添加宽度和高度100％，使对象适合我的情况。

我认为对象拟合需要从图像宽度和高度确定值才能正常工作。

＆＃13;

.test {
  width: 200px;
  height: 200px;
  border:  2px solid red;
}
    
.test img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="test">
    <img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
 </div>

＆＃13;

最佳！

Answer 2

最有可能的是，您希望将尺寸设置为图像本身，而不是其父版本。

＆＃13;

img {
  object-fit: cover;
  width: 200px;
  height: 200px;
  border:  2px solid red;
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">

＆＃13;

css object-fit属性有什么问题

2 个答案: