Flexbox 图像匹配容器高度答案

【问题标题】：Flexbox image match container heightFlexbox 图像匹配容器高度
【发布时间】：2018-02-07 10:06:16
【问题描述】：

我的网站上有 4 张图片，并在网格中垂直显示 2 张，旁边有 2 张水平图片。

我遇到的问题是，当页面为桌面大小时，图像排列正确，但当页面缩小到移动设备时，图像的缩放比例会有所不同，并且看起来不对齐

如您所见，左侧的垂直图像无法缩放以适应容器高度，有没有办法拉伸这些图像以匹配容器高度？

如何让图像始终保持对齐？

* {
  box-sizing: border-box;
}
.home-promo-wrap {
  display: flex;
  flex-wrap: wrap;
}

.home-promo-cell {
  display: flex;
  flex: 0 0 50%;
}

.gridA {
  display:flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.gridB {
  display:flex;
  flex-wrap: wrap;
}

.cell {
  display: flex;
  flex: 0 0 50%;
  padding: 10px;
}

.gridB .cell:nth-child(1) {
  flex: 0 0 100%;
}

.gridB .cell:nth-child(2) {
  flex: 0 0 100%;
}

.text-vertical {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #000;
  z-index: 1;
  text-align: center;
  background: rgba( 255,255,255,0.6);
  padding: 20px;
}

.inner-cell-vertical:hover .text-vertical {
  background: rgba(255,255,255,0);
  transition: background 0.8s ease;
}

.inner-cell-vertical {
  position: relative;
  overflow: hidden;
  background: #ff00ff;
}

.inner-cell-vertical img {
  width: 100%;
  height: auto;
  display: block;
  overflow:hidden;
}

.inner-cell-vertical::after {
  content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(255,255,255,.6);
    animation-name: fadeFromtop;
        -webkit-animation-name: fadeFromtop;
        animation-duration: 300ms;
        -webkit-animation-duration: 300ms;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        overflow: hidden;
}

.inner-cell-vertical:hover .text {
  bottom: 50%;
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -o-transform: translateY(50%);

}

.text {
  position: absolute;
  top:0;
  left:0;
  padding-left: 35px;
  padding-bottom: 17px;
  transition: all 0.5s ease;
  height: 100%;
}

a {
  display: flex;
}

a:hover .inner-cell-vertical:after {
  animation-name: fadeFromBottom;
        -webkit-animation-name: fadeFromBottom;
        animation-duration: 300ms;
        -webkit-animation-duration: 300ms;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        opacity:1;
        overflow: hidden;
}


@keyframes fadeFromBottom  {
        0%{
            opacity:0;
            -webkit-transform: translateY(100%);
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -o-transform: translateY(100%);
            transform: translateY(100%);
        }
        100%{
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
            display: block;
        }
    }
@keyframes fadeFromtop  {
    0%{
        opacity:1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100%{
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(400%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}

<div class="home-promo-wrap">
  <div class="home-promo-cell">
    <div class="gridA">
      <div class="cell">
        <a>
        <div class="inner-cell-vertical">
        <div class="text-vertical">
          <h2>

          </h2>
        <p class="text-desc">
        </p>
        </div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
        </a>
      </div>
      <div class="cell">
        <a>
          <div class="inner-cell-vertical">
            <div class="text-vertical">
              <h2>

              </h2>
            <p class="text-desc">
            </p>
            </div>
          <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="home-promo-cell">
    <div class="gridB">
      <div class="cell">
        <a>
            <div class="inner-cell-vertical">
              <div class="text-vertical">
                <h2>

                </h2>
              <p class="text-desc">
              </p>
              </div>
            <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
            </div>
          </a>
        </div>
      <div class="cell">
        <a>
            <div class="inner-cell-vertical">
              <div class="text-vertical">
                <h2>

                </h2>
              <p class="text-desc">
              </p>
              </div>
            <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
            </div>
          </a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

图像有不同的尺寸，CSS 规定它们的高度应该是“自动”，因此它们仅在某些条件下几乎完美对齐：大约从 1600 像素到 1700 像素宽度的屏幕。
你的图片完全对齐，我不知道你的意思？
object-fit 怎么不能按你想要的方式工作？
我还使用background-image 使用示例更新了我的答案。
我无法使用对象匹配来处理我的代码，目前浏览器支持对我来说太有限了，但谢谢

标签： html css flexbox

【解决方案1】：

我相信它在 css 中的第 64 行进行了单行更改。

height: auto; 到 height: 100%;

.inner-cell-vertical img {
  width: 100%;
  height: 100%;
  display: block;
  overflow:hidden;
}

这里是Pen。请让我知道这是否有帮助。

【讨论】：

不幸的是，这会拉伸并扭曲图像。试试不同比例的，你会看到的。
@LGSon 这就是实际的问题，“有没有办法拉伸这些图像以匹配容器高度”。
拉伸，是的，扭曲/破坏纵横比，否。
@tom-harrison，在这种情况下，您可以考虑将图像设置为background-image 以保持浏览器支持的纵横比。
感谢您的建议，但这些选项似乎都没有按我想要的方式工作，所以我可能会求助于使用 background-image

【解决方案2】：

如果要保留img，您可以使用object-fit。

注意，object-fit 在浏览器支持方面存在限制：https://caniuse.com/#feat=object-fit

如果您需要更好的浏览器支持，这里有一个使用 background-image 的示例：jsfiddle demo。
此版本的主要功能是设置高度和嵌套 flex 容器。

堆栈sn-p

* {
  box-sizing: border-box;
}
.home-promo-wrap {
  display: flex;
  flex-wrap: wrap;
}

.home-promo-cell {
  display: flex;
  flex: 0 0 50%;
}

.gridA {
  display:flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.gridB {
  display:flex;
  flex-wrap: wrap;
}

.cell {
  display: flex;
  flex: 0 0 50%;
  padding: 10px;
}

.gridB .cell:nth-child(1) {
  flex: 0 0 100%;
}

.gridB .cell:nth-child(2) {
  flex: 0 0 100%;
}

.text-vertical {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #000;
  z-index: 1;
  text-align: center;
  background: rgba( 255,255,255,0.6);
  padding: 20px;
}

.inner-cell-vertical:hover .text-vertical {
  background: rgba(255,255,255,0);
  transition: background 0.8s ease;
}

.inner-cell-vertical {
  position: relative;
  overflow: hidden;
  background: #ff00ff;
}

.inner-cell-vertical img {
  width: 100%;
  height: 100%;               /*  changed  */
  display: block;
  overflow:hidden;
  object-fit: cover;          /*  added  */
}

.inner-cell-vertical::after {
  content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(255,255,255,.6);
    animation-name: fadeFromtop;
        -webkit-animation-name: fadeFromtop;
        animation-duration: 300ms;
        -webkit-animation-duration: 300ms;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        overflow: hidden;
}

.inner-cell-vertical:hover .text {
  bottom: 50%;
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -o-transform: translateY(50%);

}

.text {
  position: absolute;
  top:0;
  left:0;
  padding-left: 35px;
  padding-bottom: 17px;
  transition: all 0.5s ease;
  height: 100%;
}

a {
  display: flex;
}

a:hover .inner-cell-vertical:after {
  animation-name: fadeFromBottom;
        -webkit-animation-name: fadeFromBottom;
        animation-duration: 300ms;
        -webkit-animation-duration: 300ms;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        opacity:1;
        overflow: hidden;
}


@keyframes fadeFromBottom  {
        0%{
            opacity:0;
            -webkit-transform: translateY(100%);
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -o-transform: translateY(100%);
            transform: translateY(100%);
        }
        100%{
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
            display: block;
        }
    }
@keyframes fadeFromtop  {
    0%{
        opacity:1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100%{
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(400%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}

<div class="home-promo-wrap">
  <div class="home-promo-cell">
    <div class="gridA">
      <div class="cell">
        <a>
        <div class="inner-cell-vertical">
        <div class="text-vertical">
          <h2>

          </h2>
        <p class="text-desc">
        </p>
        </div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
        </a>
      </div>
      <div class="cell">
        <a>
          <div class="inner-cell-vertical">
            <div class="text-vertical">
              <h2>

              </h2>
            <p class="text-desc">
            </p>
            </div>
          <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="home-promo-cell">
    <div class="gridB">
      <div class="cell">
        <a>
            <div class="inner-cell-vertical">
              <div class="text-vertical">
                <h2>

                </h2>
              <p class="text-desc">
              </p>
              </div>
            <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
            </div>
          </a>
        </div>
      <div class="cell">
        <a>
            <div class="inner-cell-vertical">
              <div class="text-vertical">
                <h2>

                </h2>
              <p class="text-desc">
              </p>
              </div>
            <img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
            </div>
          </a>
      </div>
    </div>
  </div>
</div>

【讨论】：