Question

我想知道，有可能做到这一点吗？我快疯了：/

假设我有一个1200x628的图片，并且我希望它以固定高度880x200的div显示。

我尝试过的每个解决方案都总是以某种方式裁剪图像以适合div，所以我要问的是，是否有可能自动调整图像的大小以使其全部显示（并且我的意思是所有：P） div及其宽高比？像缩小一样，我真的不知道如何解释这个笑声，希望您能明白这一点。

谢谢大家。

Answer 1

您可以使用object-fit css属性，如以下示例所示：

.img-wrap {
  position: relative;
  width: 880px;
  height: 200px;
  overflow: hidden;
}

.img-wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

<div class="img-wrap">
  <img src="https://cdn.pixabay.com/photo/2020/06/29/17/26/photographer-5353515_1280.jpg" />
</div>

Answer 2

如果要保持宽高比：

img {
  width: 100%;
  object-fit: contain;
}

但是此解决方案的问题在于，图像不会占据其父级的全部区域！

要使其充满整个区域，您必须打破长宽比：

img {
  width: 100%;
  height: 100%;
  display: flex;
}

Answer 3

这应该对您有用。

<img src="xxx.jpg" width='880' />

880是div的宽度或要显示的图像宽度

确保您不要提供任何身高属性。

示例

Actual width of image is 1200px, what you see below is of width 100
<br />

<img src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" width='100' />

Answer 4

是的。您给外部div设置尺寸，然后将图像CSS设置为width：100％;和高度：100％;

其他选项是将图像设置为背景图像，并使用background-size：cover;

是否可以在较小的div内完全适合大图像？

4 个答案: