时间戳

首页 > 解决方案 > 响应式方形 img（填充底部：100%）在 iOS 上不起作用？

css - 响应式方形 img（填充底部：100%）在 iOS 上不起作用？

问题描述

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

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

我哪里错了？我检查了Caniuseobject-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

标签： csscss-gridresponsive-imagesobject-fit

解决方案

我更改了 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

推荐阅读