内容高度父容器的100％

问题描述：

我试图让.video-wrap高度为包装物高度的100％。我需要的只是使所有图像的宽度和高度相同。问题是在px中未指定高度以创建响应式布局。如何让所有图像具有相同的高度？我不需要js解决方案。内容高度父容器的100％

body { 
 
    background: #a1a1a1; 
 
} 
 
.video-wrap {} .wrapper { 
 
    display: flex; 
 
    height: inherit; 
 
} 
 
.video { 
 
    width: 29.69%; 
 
    margin: 2%; 
 
    box-sizing: border-box; 
 
    background: gray; 
 
} 
 
.content { 
 
    padding: 1.5%; 
 
    border: 3px solid rgba(140, 139, 139, 0.6); 
 
    background-color: black; 
 
} 
 
.video img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
div.desc { 
 
    color: white; 
 
    text-align: center; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 1</div> 
 
     </div> 
 
    </div> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/8747/SITours/one-world-observatory-admission-in-new-york-city-224249.jpg" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 2</div> 
 
     </div> 
 
    </div> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="http://cdn.ek.aero/english/images/New-York-1_tcm233-2256848.jpg" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 2</div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body>

我不知道如果我这样做是正确的，但你有没有尝试设置'最小高度：100％;'？ –

DawidZbiński，是的，这就是我想要实现的。 –

答

试试这个如果你能充分IMG然后更改.content高度

.content 
{ 
    padding: 1.5%; 
    border: 3px solid rgba(140, 139, 139, 0.6); 
    background-color: black; 
    height: 80%; /* Change per. Base on requirements*/ 
}

片断实例

body { 
 
    background: #a1a1a1; 
 
} 
 
.video-wrap { 
 
    height: 100%; 
 
    } 
 
.wrapper { 
 
    display: flex; 
 
    height: inherit; 
 
} 
 
.video { 
 
    width: 29.69%; 
 
    margin: 2%; 
 
    box-sizing: border-box; 
 
    background: gray; 
 
} 
 
.content { 
 
    padding: 1.5%; 
 
    border: 3px solid rgba(140, 139, 139, 0.6); 
 
    background-color: black; 
 
    height: 80%; 
 
} 
 
.video img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
div.desc { 
 
    color: white; 
 
    text-align: center; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 1</div> 
 
     </div> 
 
    </div> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/8747/SITours/one-world-observatory-admission-in-new-york-city-224249.jpg" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 2</div> 
 
     </div> 
 
    </div> 
 
    <div class="video"> 
 
     <div class="video-wrap"> 
 
     <div class="content"> 
 
      <a target="_blank" href={link}> 
 
      <img src="http://cdn.ek.aero/english/images/New-York-1_tcm233-2256848.jpg" /> 
 
      </a> 
 
     </div> 
 
     <div class="desc">NY 2</div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body>

谢谢。但我没有看到任何区别。 –

答

对于加入反应的元素，我总是用：

height:auto; 
width:100%;

当你想要的高度和宽度始终是相同的，你的形象应该是这样的，或者你必须用js在CSS有没有办法做到这一点，除了增加宽度和高度图像特性。
例如，你可以使用这样的图像尺寸一定的价值：

.container img 
{ 
height:150px; 
width:150px; 
}

你应该重写'with'到'width':) –

内容高度父容器的100％

相关推荐