コンテンツの高さ親コンテナの100％

.video-wrapラッパーの高さの100％の高さ。私が必要とするのは、すべての画像を同じ幅と高さにすることだけです。問題は、応答レイアウトを作成するためにpxに高さが指定されていないことです。どのようにすべての画像を同じ高さにしますか？私はno-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 { padding: 1.5%; border: 3px solid rgba(140, 139, 139, 0.6); background-color: black; height: 80%; /* Change per. Base on requirements*/ }

スニペット
.content高さを変更することができる場合は、このを試してみてください例

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%;

あなたは高さと幅は常に同じにしたい場合は、あなたのイメージは次のようにあるべきか、CSSのjsファイルを使用する必要がありますproprtyをイメージするために幅と高さを加えることを除いて、それを行う方法はありません。

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

出典

2016-09-28 12:06:31 SAM

おそらく 'with'を 'width'に書き換えるべきです:) –

コンテンツの高さ親コンテナの100％

答えて

関連する問題