相对于另一个图像水平对齐图像

Question

我正在尝试根据高度完美地对齐一些图片，同时保持它们的缩放能力。我已经在 CSS 中使用浮点数制作了列布局。有三列并且宽度相等，因此它们缩放相同，但我似乎无法使图像具有最佳高度，因此它们都适合具有相同高度的容器。我中间一栏的图像正在流出。

.section__banner-row {
  max-width: 100%;
  margin: 0 auto;
}
.section__banner-row:not(:last-child) {
  margin-bottom: 1rem;
}
.section__banner-row::after {
  content: "";
  display: table;
  clear: both;
}
.section__banner-row [class^="col-"] {
  float: left;
}
.section__banner-row [class^="col-"]:not(:last-child) {
  margin-right: 1rem;
}
.section__banner-row .col-1-of-2 {
  width: calc((99.9% - 1rem) / 2);
}
.section__banner-row .col-1-of-3 {
  width: calc((99.9% - 2 * 1rem) / 3);
}
.section__inside-banner {
  margin-top: 1rem;
}
.container-shadow-box {
  position: relative;
  overflow: hidden;
}

.container-shadow-box img {
  width: 100%;
  display: block;
  transition: all 0.5s;
}
.container-shadow-box:hover img {
  transform: scale(1.11);
}

<div class="section__banner-row">
  <div class="col-1-of-3">
    <div class="container-shadow-box">
      <img src="https://i.ibb.co/FhQFN40/blog-masonry-01.jpg" alt="Masonry 1">
    </div>
  </div>
  <div class="col-1-of-3">
    <div class="container-shadow-box">
      <img src="https://i.ibb.co/0JHHwbm/blog-masonry-02.jpg" alt="Masonry 2">
    </div>
    <div class="section__inside-banner">
      <div class="col-1-of-2">
        <div class="container-shadow-box">
          <img src="https://i.ibb.co/NycZ9KN/blog-masonry-03.jpg" alt="Masonry 3">
        </div>
      </div>
      <div class="col-1-of-2">
        <div class="container-shadow-box">
          <img src="https://i.ibb.co/qRNZm1q/blog-masonry-04.jpg" alt="Masonry 4">
        </div>
      </div>
    </div>
  </div>
  <div class="col-1-of-3">
    <div class="container-shadow-box">
      <img src="https://i.ibb.co/PmcznpR/blog-masonry-05.jpg" alt="Masonry 5">
    </div>
  </div>
</div>

Answer 1

Flexbox 示例：

body * {
    box-sizing: border-box;
}
.grid-box {
    padding-bottom: 28%; /* adjust this for container aspect ratio */
    height: 0;
    position: relative;
    background: pink;
}
.section__banner-row {
    display: flex;
}
.section__banner-row.outer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 5px;
}
.section__banner-row .col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
.section__banner-row .col > div {
    flex-basis: 50%;
    flex-grow: 1;
}
.container-shadow-box {
    margin: 10px;
    height: 100%;
    background: #ddd;
}
.container-shadow-box>div {
    background-size: cover;
    height: 100%;
}

<div class="grid-box">
    <div class="section__banner-row outer">
        <div class="col">
            <div class="container-shadow-box">
                <div style="background-image: url(https://i.ibb.co/FhQFN40/blog-masonry-01.jpg);"></div>
            </div>
        </div>
        <div class="col">
            <div class="container-shadow-box">
                <div style="background-image: url(https://i.ibb.co/0JHHwbm/blog-masonry-02.jpg);"></div>
            </div>
            <div class="section__banner-row">
                <div class="col">
                    <div class="container-shadow-box">
                        <div style="background-image: url(https://i.ibb.co/NycZ9KN/blog-masonry-03.jpg);"></div>
                    </div>
                </div>
                <div class="col">
                    <div class="container-shadow-box">
                        <div style="background-image: url(https://i.ibb.co/qRNZm1q/blog-masonry-04.jpg);"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="container-shadow-box">
                <div style="background-image: url(https://i.ibb.co/PmcznpR/blog-masonry-05.jpg);"></div>
            </div>
        </div>
    </div>
</div>

小提琴演示

我的浏览器是否支持弹性框？