Flexbox图像匹配容器高度

时间：2018-02-07 10:06:17

标签： html css flexbox

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

我遇到的问题是，当页面是桌面大小时，图像会正确排列，但当缩小到移动版时，图像会以不同的方式缩放，看起来不对齐

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

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

＆＃13;
＆＃13; 
* {
  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%);
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

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

如果您需要更好的浏览器支持，请使用background-image：jsfiddle demo进行示例。
此版本的主要设置是设置高度和嵌套的Flex容器。

Stack snippet

＆＃13;
＆＃13; 
* {
  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%);
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我相信它在css的第64行换了一行。

height: auto;至height: 100%; 

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

这是Pen。请告诉我这是否有帮助。

相关问题
最新问题