CSS Grid iOS 差距问题答案

【问题标题】：CSS Grid iOS gap issueCSS Grid iOS 差距问题
【发布时间】：2021-03-17 11:10:28
【问题描述】：

希望是直截了当的问题。仅使用 CSS 网格和 HTML 创建了一个响应式图片库。所有使用 chrome 和 firefox 的桌面和安卓手机都可以完美运行。然而，在 iOS 上，仅在移动视图中存在许多问题。

挑战在于图像的纵横比都为 400 像素 x 533 像素，因此是纵向图像。代码如下：

            <h2>Gallery</h2>
            <p>Check out some of the work we've done in our gallery below. Fortunately we 
                specialise in shining and shoes and not taking photos, eh! Check out our 
                instagram for more before and after photos!</p>
            <div class="image-gallery">
                <img src="./images/FS Gallery/Grenson 1.jpg" alt="worn mens Grenson boots">
                <img src="./images/FS Gallery/Grenson 2.jpg" alt="Cleaned and shined mens Grenson boots">
                <img id="large-img-1" src="./images/FS Gallery/Selection 1.jpg" alt="Collection of shiny leather shoes">
                <img src="./images/FS Gallery/Laces 1.jpg" alt="Pair of cracked, brown mens shoes with no laces">
                <img src="./images/FS Gallery/Laces 2.jpg" alt="Pair of shiny, mens brown shoes with blue laces">
                <img src="./images/FS Gallery/mirro.jpg" alt="Mirror effect on toe cap of black pair of Wildsmith boots">
                <img src="./images/FS Gallery/David 1.jpg" alt="Pair of cracked, black Ducker monk shoes">
                <img src="./images/FS Gallery/David 2.jpg" alt="Pair of shiny, black Ducker monk shoes">
                <img src="./images/FS Gallery/DM 1.jpg" alt="Pair of worn out, brown Dr. Marten boots">
                <img src="./images/FS Gallery/DM 2.jpg" alt="Pair of restored brown Dr. Marten boots">
                <img src="./images/FS Gallery/Loake 1.jpg" alt="Pair of water-stained, black Loake's">
                <img src="./images/FS Gallery/Loake 2.jpg" alt="Pair of shiny, black Loake's">
            </div>
        </section>

CSS 代码

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
    margin-bottom: 7.8rem;
    
}
.image-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0.3rem white solid;
}

因此使用不同的解决方案存在多个问题：

移除适合的对象 - 图像不保留其纵横比并拉伸
object-fit: contains（如上面的代码）- 图像在 iOS 中以某种方式垂直拉伸，从而产生每张照片之间大间隙的视觉效果。这在 android 中不是问题
Object-fit：cover - 这有点放大，我完全明白为什么并且不是解决方案，但我已经包括在内，以防有人建议。

任何解决方案可以保持纵横比并且不会在图像边界内产生大的间隙？

Android screenshot

iOS screenshot

可以找到网站：https://fulhamshoeshine.netlify.app/

谢谢！

【问题讨论】：

只需使用 width:100% 并移除高度和对象匹配即可获得比例图像？
不幸的是，删除线条意味着具有不同网格区域中的图像的桌面视图不会跨越其指定行的整个高度。它也不能解决问题。
可能会提供您的代码的最小复制，否则我怀疑有人会对此提供帮助。
谢谢。我已经添加了 HTML，但我的意思是它非常基本。 CSS 代码已经存在。这是最少的编码，所以我希望这个问题会很容易解决，但是唉。

标签： html css ios css-grid

【解决方案1】：

由于我无法从社区或任何其他来源获得任何答案或建议，我的解决方法。如果以后有人遇到这种情况，如下：

在断点处为移动视图创建查询，并将画廊显示从网格更改为 flex。弯曲方向列。

虽然它没有解决 iPhone 视图上的网格问题，但它确实在所有设备上提供了一致的用户体验。

【讨论】：