使用flex css时如何在Safari中停止图像拉伸

Question

一个 div 中的 2 个 img 元素。我希望图像彼此相邻而不是堆叠显示，因此应用了 flex。我还希望两个图像的宽度和高度相等。

除了 safari 之外，它在所有浏览器（chrome、opera、firefox、brave）上都能完美运行。我读过 safari 被窃听，所以会拉伸图像。

我添加了 align-items: flex-start;这修复了拉伸，但随后 2 张图像的高度在底部变得不均匀。

我现在刚刚设置了一个 webkit css，所以高度不均匀只在 safari 和其他浏览器上很好。

有没有办法解决这个问题？

CSS：

.portfolio-box {
    margin-top: 40px;
    display: flex;
    width: 100%;
}

.portfolio-box > * + * {
    margin-left: 4%;
}

.portfolio-box img {
    width: 48%;
    border-radius: 5px;
    margin-bottom: 150px;
}

HTML：

<div class="portfolio-box">
     <img src="./img/portfolio2.jpg" alt="">
     <img src="./img/portfolio3.jpg" alt="">
</div>

Answer 1

我认为 JavaScript 可能会对您有所帮助。如果您唯一缺少的是 Safari 浏览器上元素的高度不均匀，那么您可以使用简单的 JavaScript 函数设置元素的高度相等。这适用于所有浏览器，您无需为 CSS 添加前缀。

function setEqualHeight() {
    'use strict';
    
    var firstElement = document.getElementById("first-element");
    var firstElementHeight = document.getElementById("first-element").clientHeight;

    var secondElement = document.getElementById("second-element");
    var secondElementHeight = document.getElementById("second-element").clientHeight;

    if(firstElementHeight > secondElementHeight) {
        secondElement.style.height = firstElementHeight + "px";
    } 
    else {
        firstElement.style.height = secondElementHeight + "px";
    }
}

Answer 2

图像（我假设是垂直的）拉伸是默认的 flexbox 行为，而不是 Safari 错误。我抓住了your code snippets and put them into Codepen - 它们在 Safari (Mac) 和 Firefox/Chrome (Win10) 上看起来都一样。

我在第 1 位下方添加了您的代码的其他一些变体，但最后一位我还限制了图像的高度。您可以看到它们再次变形。

您可以像这样在图像上使用“object-fit”（或参见上面链接的 Codepen 中的底部示例）：

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

但是，您可以看到第一张图片（较高的那张）被裁剪了。

归根结底，如果您希望图像的高度和宽度在 flexbox 布局中匹配而不会变形或裁剪，那么它们首先需要具有匹配的尺寸。