响应式方形图像（填充底部：100%）在 iOS 上不起作用？答案

【问题标题】：Responsive square img (padding-bottom: 100%) not working on iOS?响应式方形图像（填充底部：100%）在 iOS 上不起作用？
【发布时间】：2020-05-05 05:04:01
【问题描述】：

我的博客中有一个“相关帖子”网格，并尝试使用padding-bottom: 100% 技巧使每个帖子的图像都具有响应性。

它适用于桌面，但在移动 iOS 上，图像的高度会延伸到视口的 100%。在三星手机上工作正常。

我哪里错了？我检查了 Caniuse 上的 object-fit 属性，它在很大程度上得到了支持。在 Safari、Chrome、Edge 和 Firefox 上试过：同样奇怪的行为。

提前感谢您的宝贵帮助！

这里是标记：

<!-- GRID CONTAINER -->
<div class="related-posts"> 

    <!-- IMAGE OF EACH GRID ITEM -->
    <a class="img-wrapper">
         <img src="/path/to/img">
    </a>

    ... <!-- OTHER GRID ITEMS -->

</div>

还有 SASS：

.related-posts
   display: grid
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
   grid-gap: 1.5rem

.img-wrapper
   display: grid
   place-items: center
   &::before
     content: ""
     padding-top: 100%
     display: block
     grid-area: 1 / 1 / 2 / 2
   img
     width: 100%
     height: 100%
     object-fit: cover
     grid-area: 1 / 1 / 2 / 2

【问题讨论】：

我尝试将.img-wrapper 的高度设置为 0，尽管它修复了移动设备上的 1:1 图像比例，但我遇到了各种边距问题。

标签： css css-grid responsive-images object-fit

【解决方案1】：

我更改了 CSS，现在它可以工作了。代码如下：

.img-wrapper
   position: relative
   display: block
   &::before
     content: ""
     padding-top: 100%
     display: block
   img
     position: absolute
     width: 100%
     height: 100%
     object-fit: cover
     top: 0
     left: 0
     bottom: 0
     margin: auto

似乎问题在于将每个网格项设置为display: grid

【讨论】：