Safari 高度：100% 问题

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

试试看吧，我无法访问 Safari 浏览器，所以，祈祷吧：

css:

.row {
  display:flex;
}

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

.outer-div
{
  display:flex;
}

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