响应式正方形img (padding-bottom: 100%)在iOS上无法使用？

Question

我在我的博客里有一个 "相关文章 "的网格，并尝试了 "相关文章"。padding-bottom: 100% 技巧，使每个帖子的图像响应的方形。

它的工作原理在桌面上，但在手机iOS的图像高度延伸到100％的视口。在三星手机上工作正常。

我到底哪里出了问题？我检查了 object-fit 身上 Caniuse 并且它在很大程度上得到了支持。在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

Answer 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