css 如果图像大于div，请使用Scratch图像填充div，并使用纵横比或限制尺寸

wko9yo5t 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(121)

我有一个尺寸为630x630px的div。现在我想在这个div中放置一个图像。如果图像大于630px（它的宽度或高度），我可以简单地使用最大宽度和最大高度，它将适合630px。但是如果图像小于630px怎么办？在这种情况下，我想这张图片的较大的尺寸被拉伸与恒定的纵横比为630px。我该怎么做？

css

来源：https://stackoverflow.com/questions/76235766/scratch-image-to-fill-div-with-aspect-ratio-or-limit-dimensions-if-image-is-bigg

2条答案

按热度按时间

6rqinv9w1#

您可以在图像上使用object-fit和object-position CSS属性来实现这一点。您的代码应如下所示：

.container {
  width: 630px;
  height: 630px;
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

赞(0）回复(0）举报 2023-05-19

hujrc8aj2#

我会避免在不必要的时候使用position: absolute;。
object-fit自己完成了这个任务。

.container {
  width: 630px;
  height: 630px;
  
  /* To visualize better the behavior of the image */
  border: 1px solid #333;
  margin-bottom: 1rem;
}

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

<div class="container">
  <img src="https://placehold.co/1200x1000" alt="">
</div>

<div class="container">
  <img src="https://placehold.co/150x80" alt="">
</div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 如果图像大于div，请使用Scratch图像填充div，并使用纵横比或限制尺寸

2条答案

相关问题

热门标签

最新问答