Question

我有以下图片

<div class="product-main-img">
    <img src="@Model.ImageUrl" alt="@Model.Name" />
</div>

此图像可能比其容器大或小于它。当我更小时我需要垂直和水平居中，但如果它更大，我需要包含它并使较短边居中。

我可以自己做这个，看看我需要使用JavaScript应用哪种样式;但我有点想用纯CSS来解决它。有什么想法吗？

Answer 1

这假设容器已指定尺寸（，因为您提到img可能更大/更小）。

因此，对容器使用flex（允许将其子元素居中），将min-width和max-height添加到图像中。

＆＃13;

.product-main-img {
  width: 300px;
  height: 150px;
  border:1px solid black;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.product-main-img img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div class="product-main-img">
  <img src="http://dummyimage.com/400x100" alt="@Model.Name" />
</div>

<div class="product-main-img">
  <img src="http://dummyimage.com/100x200" alt="@Model.Name" />
</div>

<div class="product-main-img">
  <img src="http://dummyimage.com/200x100" alt="@Model.Name" />
</div>

<div class="product-main-img">
  <img src="http://dummyimage.com/400x200" alt="@Model.Name" />
</div>

＆＃13;

Answer 2

执行此操作的一种简单方法是将图像设置为background-image的{{1}}，然后使用<div>和background-position: center使其适合容器。例如：

＆＃13;

background-size: contain

＆＃13;

.image-container {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

＆＃13;

使用纯CSS进行图像处理

2 个答案: