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

【问题标题】：How do you center image inside square aspect ratio and maintain responsiveness?您如何在正方形纵横比内居中图像并保持响应能力？
【发布时间】：2019-11-05 20:08:06
【问题描述】：

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

我目前正在执行以下操作，但想知道是否有更干净的 css 解决方案来使 div 内的图像（垂直/水平）居中，就像使用 background-size: contain 在响应式 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

【问题讨论】：

嘿，看起来这是一个答案，而不是一个问题。发布问题然后自己回答是完全可以的（并且受到鼓励！）（最好在答案中对您所做的事情进行一些解释）。您应该提出这个问题，然后发布答案。否则它将被关闭。

标签： html css

【解决方案1】：

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

这样就不需要使用transform和meddle with 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>

【讨论】：

+1 browser support of object-fit is pretty great;请注意，IE11 不支持，一些较旧的浏览器有一些限制。
我试过了，但没有办法让拇指保持响应并保持方形纵横比。
在我之前的 sn-p 中，我明确指定了 height: 250px 或 .thumbnail。现在，我已将代码更新为使用 padding-bottom: 100% 作为您的代码。
哦，那真是太好了！惊人的！我将使用这个和我的解决方案作为 IE11 的后备。