行の高さが行の要素の高さと異なる

Question

ブートストラップでは、行の高さが行の列の1つの最も高い要素の高さに等しいと考えました。私は4枚の画像を追加しました。そのうちの3枚は2048x1362のサイズでしたが、4枚目の画像のサイズは1362x2048でした。私が思った行の高さは2048となりました（写真参照）。

には、すべての列にわたって高さが同じになり、私は明示的に第四画像の高さを設定するためにCSSを追加しました。明らかに

<img src="images/fathersday3.jpg" class="img-fluid rounded-circle d-none d-sm-block" style="height:1362px;"> 

しかし、私の驚きに、第四画像ははるかに大きくなった（下の写真を参照）

、行の高さは、当初2048ピクセルではなかったです。私はimgタグにCSSを追加していなかった行の高さだった何

私の質問

1. 。
2. どのようにすべての画像の高さを同じにすることができますか？

Answer 1

私はまずimg-fluidの仕組みを理解する必要があると思います。

1362x2048のサイズの画像を追加しても、その画像がブートストラップグリッド内に表示されている間は正確にそのサイズになるとは限りません。

なぜですか？クラス.img-fluidを適用したためです。つまり、イメージはコンテナ列と同じ幅にすることができます。したがって、画像の幅は縮小され、高さは比率を維持しながら自動的にサイズが変更されます。だから、その時にあなたの列がどれだけ高かったのかは分かりません。

列の高さを同じにすることもできますが（B4はすでにflexboxを使用しています）。画像の場合は、同じ高さで同じサイズ/割合の画像をアップロードする必要があります。

あなたに驚いたことは、画像に明示的に高さを指定したために起こったことです。先ほど言及したように、画像の高さは、img-fluidがある程度低い値になる可能性があるため、小さくなりました。高さを指定すると、画像の高さを大きくする必要がありました。 あなたのイメージは不均衡に伸びています。