Question

我的布局左侧是图片，右侧是文字。我在图像上使用flexbox和对象拟合，以确保图像保持在父级的整个高度，文本保持在垂直中间。这在Chrome和Firefox中运行良好，但我无法在Safari中使用它（我使用的是10.1），即使我在父级上放置了align-items：stretch。

HTML

<div class="o-grid">

    <div class="o-grid__item u-1/2@s post__feat-img">

        <a class="thumbnail-wrapper" href="#">
            <img width="730" height="730" src="/">
        </a>

    </div>

    <div class="o-grid__item u-1/2@s">
    </div>

</div>

CSS

.o-grid {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.post__feat-img {
    align-self: stretch;
    -webkit-align-self: stretch;
}

.thumbnail-wrapper {
    display: block;
}

.thumbnail-wrapper, .thumbnail-wrapper img {
    height: 100%;
}

.thumbnail-wrapper img {
    object-fit: cover;
}

如果我在safari中检查元素，.post__feat-img正在拉伸但是a内的标记是不是。

编辑：在问4th solution here之后，我将CSS调整为以下内容：

新CSS

    .o-grid {
        display: flex;
        align-items: center;
    }
    .post__feat-img {
        display: flex;
        align-self: stretch;
        flex: 1;
    }
    .thumbnail-wrapper {
        display: flex;
        flex: 1;
    }
    .thumbnail-wrapper img {
        object-fit: cover;
    }

这在Safari中修复了它，但仅在Chrome中打破了布局，而不是Firefox。发生的是div延伸到图像的整个高度，而不是基于父宽度的图像保持纵横比。

align-self：伸展不在Safari中工作？

0 个答案: