Question

我正在为客户创建产品网格，并且遇到了将动态缩略图（有时是正方形，纵向或横向）以正方形纵横比正确居中并保持响应速度的问题。

我目前正在执行以下操作，但想知道是否存在更干净的CSS解决方案，以将图像（垂直/水平）居中div居中，就像在{{1} }。

background-size: contain

.thumbnails {
  margin: auto;
  width: 250px;
}

.thumbnail {
  position: relative;
  margin: 1rem;
  padding-bottom: 100% ;
  border: 1px solid gray;
}

.thumbnail__img {
  position: absolute;
  max-width: 100% ;
  max-height: 100% ;
  width: auto;
  height: auto;
  left: 50% ;
  top: 50% ;
  transform: translate(-50% , -50% );
}

Demo JSFiddle

Answer 1

这是使用object-fit: contain;的替代方法。

这样，就无需在左/上使用变换和干涉了。

.thumbnails{
  width: 250px;
}

.thumbnail{
  position: relative;
  margin: 1rem;
  padding-bottom: 100%;
  border: 1px solid gray;
}

.thumbnail__img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="thumbnails">
  <figure class="thumbnail">
    <img class="thumbnail__img" src="https://dummyimage.com/300x600/000/fff">
  </figure>

  <figure class="thumbnail">
    <img class="thumbnail__img" src="https://dummyimage.com/600x300/000/fff">
  </figure>

  <figure class="thumbnail">
    <img class="thumbnail__img" src="https://dummyimage.com/600x600/000/fff">
  </figure>
</div>

您如何将图像居中放置在正方形纵横比内并保持响应速度？

1 个答案: