响应方形img(底部填充:100%)在iOS上不起作用

Question

我的博客中有一个"相关帖子"网格，并尝试了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

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