ブートストラップ3：異なる高さで同じ高さの画像が表示される

Question

ブートストラップを使用して、360px四角形または360px高さで720px幅のイメージを使用してイメージグリッドを設計しました。なんらかの理由で、ワイド画像の行が大きく表示されます。なぜこれが起こっているか、それを修正する方法は？ここで

はthe code in bootply

感謝です！

Answer 1

レイアウトで拡大縮小されているため、画像の高さが同じであるという理由だけで、画像は同じ高さに表示されません。また、各列のパディングと列の要素によって、イメージに使用できる水平スペースが減少し、水平サイズが変更されたときに垂直サイズも変更されます（イメージを適切に拡大するため）。

左/ワイド画像がどのように1つの列に表示されているかを見てくださいが、右側の2つの画像は2つの列にあります。右側の2枚の画像には左側よりも多くのパディングがあります（2倍のパディングがあります）。それはそれぞれの高さを左の画像よりも短くするように拡大しています。

.col-*クラスと.thumbnailからパディングを削除して、それらを削除すると画像が並んでいることがわかりました。

http://www.bootply.com/KacXrRCbYH

あなたはこの方法で、任意の数の修正だろうが、私はそれがあなたのレイアウトに最適に動作するために何が起こっているのかに関して、あなた次第であることが必要だと思います。最も簡単な方法は、おそらくちょうどそのパディングを考慮に入れて、左の画像の高さを変更することです。 720x341はそこで動作する解像度のようです。

http://www.bootply.com/T4F3fdgNyf