html - 您如何在正方形纵横比内将图像居中并保持响应能力？

Question

我正在为客户创建产品网格，并面临以方形纵横比正确居中动态缩略图(有时是方形、纵向或横向)并保持响应能力的问题。

我目前正在执行以下操作，但想知道是否有更干净的 css 解决方案，用于在 div 内居中图像(垂直/水平)，就像在具有 background 的响应式 div 上使用背景图像一样-大小:包含。

.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% );
}

<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>

Demo JSFiddle

Answer 1

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

这样就不需要使用 transform 和 left/top 干预了。

.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;
  display: block; // important since images have default inline-block property
}

<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>