Question

这个问题可能看起来很奇怪，但这是交易：

前几天我遇到了一些文章，并看到了<img>标签的css图片显示属性，它允许更改标签的宽度和高度，而不会拉伸图片本身。

最终效果看起来像overflow: hidden;，但没有父容器。

我忘了将该文章和媒体名称加入书签。有人能告诉我财产说明吗？

Answer 1

我猜您正在寻找object-fit CSS属性。

＆＃13;

img {
    width: 100px;
    height: 200px;
  }
img.noStretch{
    object-fit: cover;
  }

＆＃13;

<img src="http://lorempixel.com/200/200"/>

<img class="noStretch" src="http://lorempixel.com/200/200"/>

＆＃13;

Answer 2

您可能需要包装器，或使用背景样式。

我的sugesstion：

＆＃13;

#img {
  display: inline-block;
  width: 160px;
  height: 120px;
  background: 50% 50% no-repeat;
  background-size: cover; /* try also: contain or 100% */
}

＆＃13;

<div id="img" style="background-image: url(https://www.gravatar.com/avatar/0217df290e6f29cbe204479f48fb662f?d=identicon&r=PG)"></div>

＆＃13;

我认为这就是你想要的。

什么是<img/>标签的css属性来显示没有失真的图像？

2 个答案: