イメージ付きカスタムグリッド

Question

私はWeb開発を学んでいるので、Bootstrap3のようなライブラリを使用しましたが、私は完全に理解し、ブートストラップで利用可能ないくつかのものを作り直すことによって、Web開発者の知識をさらに伸ばしたいと思います。私は現在、カスタムグリッドを使いこなしていて、レスポンシブに残るイメージを入れています。問題は、イメージのサイズが私の列にあるかどうかに関わらず、イメージをすべて1つの高さにしたいということです。画像の幅はまさに私が思ったものですが、高さを同じにすることはできません（少なくとも余分な画像は切り取ってください）。これは私が取り組んでいるCustom Grid CodePenです。質問の多く、私が使用していないbackground-imageプロパティを使用しているが、任意の助けをいただければ幸いですおかげ

編集：。！

HTML

<div class="row"> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg"> 
    </div> 
    </div> 

CSS

.row { 
    position: relative; 
    min-width: 100%; 
} 

.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 

[class*="col-"] { 
    float: left; 
} 

.responsiveImage { 
    max-width: 100%; 
    height: auto; 
    padding-top: 30%; 
} 

Answer 1

イメージをそれぞれの列に塗りつぶしても、すべての高さが同じになりますか？

もちろん、イメージの周りに折り返しdivを追加して、height:200pxとoverflow:hiddenにすることもできます。しかし、これは反応しません。

私があなたを正しく理解してくれれば、フレックスボックスやjavascriptを使わずにCSSで行うことはできません。私が恥知らずにgoogleから選んだこのコードを見てください：https://codepen.io/imohkay/pen/gpard。またはもっと深く見てください：https://clearleft.com/posts/270

Answer 2

は、あなたはそれに比例してスケーリングし、それを維持するためにautoに画像の幅を設定し、その後、必要な高さを指定する必要があります。

.responsiveImage { 
    height: 300px; 
    width: auto; 
    padding-top: 30%; 
}