html - ブートストラップレスポンシブ画像で画像の高さを制限していますか?

Question

ポートフォリオセクションでブートストラップを使用してサイトで作業すると、プロジェクトの画像は次のように応答します。

'class' => 'img-responsive'

横向きの画像に最適です。縦向きの画像は幅に合わせて拡大されますが、高すぎます。縦向きの画像を確認し、固定の高さ600pxを適用する方法はありますか?

Answer 1

コンテナの高さを固定する必要がある場合は、コンテナに ID (またはクラス) を指定し、.img-responsive 制限を逆に変更します。

.container {
height: 600px;
}


/*And then change */
  .container .img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}  
/*To */

.container  .img-responsive {
    display: block;
    width: auto;
    max-height: 100%;
}

向きの組み合わせでどのように機能するかはわかりませんが、それらが浮かんでいる場合は実際には問題になりません