Question

希望有人可以给我一些启示。我一直在引导列内设置一个组件。如果在Chrome和Firefox中查看，则两个图像的高度相同，但是在Safari中查看时，两个图像的高度不同（较短的图像不会扩展到父div的整个高度）。我尝试过将高度更改为自动，以及使用bootstrap img-fluid类，但似乎没有任何效果。我只是想让图像在右边扩展到父div的整个高度。有谁知道如何仅使用CSS来实现这一目标？

谢谢！

html：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="outer-div center">
                <img src="https://i.ytimg.com/vi/Vbum3VZV9g0/maxresdefault.jpg" class="responsive inner-div" alt="Smiley face">
            </div>
        </div>
        <div class="col-md-6">
            <div class="outer-div center">
                <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" class="responsive inner-div" alt="Smiley face">
            </div>
        </div>
    </div>
</div>

css：

.mt-20 {
    margin-top: 20px;
}
.responsive {
    width: 100%;
    height: auto;
}
.center {
    margin: auto;
    width: 90%;
    border: 3px solid #73AD21;
}
.inner-div
{
    transition: all .75s ease-in-out;
    height: 100%;
}
.inner-div:hover
{
    transform: scale(1.3);
}
.outer-div
{
    overflow: hidden;
    height: 100%;
}

这里是codepen example

Answer 1

试着扔这个，我无法使用野生动物园浏览器，所以，手指交叉了：

css：

.row {
  display:flex;
}

.col-md-6 {
  align-self:stretch;
}

.outer-div
{
  display:flex;
}

.inner-div
{
  align-self:stretch;
}

Safari高度：100％问题

1 个答案: