內容高度父容器的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>

來源

2016-09-28 Artem Z

我不知道如果我這樣做是正確的，但你有沒有嘗試設置'最小高度：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>

來源

2016-09-28 12:01:34

謝謝。但我沒有看到任何區別。 –

對於加入反應的元素，我總是用：

height:auto; 
width:100%;

當你想要的高度和寬度始終是相同的，你的形象應該是這樣的，或者你必須用js在CSS有沒有辦法做到這一點，除了增加寬度和高度圖像特性。
例如，你可以使用這樣的圖像尺寸一定的價值：

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

來源

2016-09-28 12:06:31 SAM

你應該重寫'with'到'width':) –

內容高度父容器的100％

回答

相關問題