图像不会在 flexbox 中拉伸到父级的全高答案

【问题标题】：images won't stretch to full height of parent in flexbox图像不会在 flexbox 中拉伸到父级的全高
【发布时间】：2020-09-12 19:34:16
【问题描述】：

我有一个具有多个图像包装器的 flex 父容器 .stills。该代码在桌面视图中效果很好，但在移动设备中却不行。我想要的只是将图像拉伸到其父级的全高，即屏幕的全高。我希望父级的宽度自动调整以按比例显示所有图像，因此容器具有溢出：滚动属性。然后基本上你可以滚动容器（.stills）来查看所有图像。我在每个包装器中有两个图像，当单击正面图像时它们会互换，因此它绝对位于正面图像下方。所附图像显示静态包装器拉伸到设备的全高，但即使我将静态容器设置为溢出，图像仍然很小。

HTML

<div id="stills-ba" data-tab-content>
            <div class="stills-ba">
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
               </div>
            </div>
         </div>

CSS

    #stills-ba {
        
           width: 100%;
           height:100vh;
           overflow: scroll;
        
        }
        
        .stills-ba {
           width: auto;
           height: 100vh;
           display: flex;
           overflow-y: hidden;
           -webkit-overflow-scrolling: touch;
           -ms-overflow-style: -ms-autohiding-scrollbar; 
        }
        
        .still-wrapper-ba {
         width: 100%;
       height: 100vh!important; 
       left: 0;
        position: relative;
       
        
        .front-img {
        
           all: revert;
           height: auto;
           width: 100%;
           transition: opacity ease 250ms;
        }
        
        .back-img {
           all: revert;
           height: auto;
           width: 100%;
           opacity: 1;
           z-index: -5;
           position: absolute;
           top: 0;
           left: 0;
        }
        
        .front-img:hover {
           opacity: 0;
        }

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将display:flex;添加到.still-wrapper-ba，其子项（img）将获得.still-wrapper-ba的高度。 p>

#stills-ba {

   width: 100%;
   height:100vh;
   overflow: scroll;

}

.stills-ba {
   display: flex;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
}

.still-wrapper-ba {
   height: 100vh;
  left: 0;
  position: relative;
  display: flex;
  flex-grow:1;

}
.front-img {
  background: yellow;
   all: revert;
   height: auto;
   width: 100vw;
   transition: opacity ease 250ms;
}

.back-img {
   all: revert;
   height: auto;
   width: 100%;
   opacity: 1;
   z-index: -5;
   position: absolute;
   top: 0;
   left: 0;
}

.front-img:hover {
   opacity: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
<div id="stills-ba" data-tab-content>
            <div class="stills-ba">
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
                  <img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
               </div>
            </div>
         </div>

 </body>
 </html>

【讨论】：

我刚做了这个，效果很好，但图像不成比例，试图挤进 100vw，知道如何让它们变宽
我也加了100vw到img