Bootstrapを使ってカルーセルを作っているのですが、大きな画像があるため、画面が画像より小さいと比率が保てません。
どうすれば変更できますか?
以下は私のコードです:
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
画像の幅を100%にしたいのですが、高さは500pxのままにしてください。
画像をdivに収め、その中に
overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
しかし、うまくいきません。
ありがとうございました!
問題はここ、ブートストラップCSSにある:
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
max-width: 100%;` を設定した場合、画像はビューポートより大きくなりません。CSSでこの動作をオーバーライドする必要があります:
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
一番下に追加された max-width: none;
に注目してください。これはデフォルトのmax-width値で、制限を解除します。
[あなたのフィドルが更新されました。
CSS3 object-fit
属性で処理する方が良いと思います。
幅と高さが固定された画像があり、アスペクト比を維持したい場合は、「object-fit:contain;」を使用できます。 高さと幅を指定して比率を維持します。
例:
img {
height: 100px;
width: 100px;
object-fit: contain;
}
詳細については、こちらをご覧ください:http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968。
これが誰かに役立つことを願っています。
カルーセルアイテム内のimg
タグを削除し、背景を追加します。こうすることで、CSS3のcoverプロパティを使うことができる。
.item1 {
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
このコードはついに私のために働きました:
.carousel .item {
background:#F9F9F9;
border:1px solid #E0E0E0;
overflow:hidden;
margin-bottom:1em;
margin-top:1em;
padding:5px;
}
.carousel-inner > .item > img {
border: 1px solid #DDDDDD;
float: left;
margin: 0pt 3px;
padding: 2px;
height: none;
width: 100%;
}
.carousel-inner > .item > img:hover {
border: 1px solid #000000;
}
どうやら、上記のソリューションは私にはうまくいきませんでした(理由はわかりません)?)しかし、私はjavascriptを使用して別の回避策を見つけました。
基本的に、これはより退屈な方法ですが、機能します。 jQueryを使用して、カルーセルの高さを特定のアスペクト比で割った幅に設定します。
これが私のコードです。
var aspectRatio = 2.5; //Width to Height!!!
var imageWidth;
var imageHeight;
//bind the window resize event to the method -
//change in carousel width is only triggered when size of viewport changes
$(window).on("resize", methodToFixLayout);
//updates the carousel width when the window is resized
function methodToFixLayout(e){
imageWidth = carousel.width();
console.log("");
console.log("Method width" + imageWidth);
console.log("");
imageHeight = imageWidth / aspectRatio;
carouselContainer.height(imageHeight);
carousel.height(imageHeight);
carouselPic.height(imageHeight);
//solve the carousel glitch for small viewports - delete the carousel
windowWidth = $(window).width();
if (windowWidth < 840){
carousel.hide();
$("#side-navbar").hide();
} else {
carousel.show();
$("#side-navbar").show();
}
}
それは私にはうまくいくようです。
それがあなたのためにもうまくいくことを願っています。
アスペクト比を自分で設定するか、別の方法を使用できます。 まず、ウィンドウの幅と高さを、画像が適切にフォーマットされているように見えるビュー次元に設定します。 幅と高さを照会し、比率を計算します。 ウィンドウを元の幅と高さに戻します。 ユーザーは変更にまったく気づかないでしょうが、寸法は記録されます。