ブートストラップカルーセル

Question

私は、ブートストラップ、カルーセルを使用しようとしていた画像の縦横比を維持し、ここに示す例で起動する方法：http://getbootstrap.com/examples/carousel/

私はテストJPG（1200x480）をロードしたスライドにしていますが、サイズを変更するときブラウザを使用すると、画像は垂直方向のサイズを維持しながら水平方向に短くなり、ブラウザが小さくなるにつれてますます歪んだ画像になります。

私は同じ問題や類似の問題で他の人を検索して見つけましたが、誰も実際に動作するものは何も示唆していません。

ブートストラップカルーセルのjpgの画像アスペクト比を維持するソリューションはありますか？

Answer 1

cssを使用してカルーセルの高さを変更できます。これは私のために働いていた：あなたが使用して、各幅のためのCSSRulesをwindowsizeを取得および設定するために@mediaを使用することができます

@media (max-width: 767px) { 
    .carousel .item { 
     height: 300px; 
    } 
} 

：

@media (max-width: 500px) { } 

@media (min-width: 501px) and (max-width: 1000px) { } 

@media (min-width: 1001px) { } 

は、おそらくあなたは、画像サイズのためにそれを使用する必要があり、あまりにも。