カルーセルで画像の縦横比を維持する

Bootstrapを使ってカルーセルを作っているのですが、大きな画像があるため、画面が画像より小さいと比率が保てません。

どうすれば変更できますか？

以下は私のコードです：

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

http://jsfiddle.net/DRQkQ/

画像の幅を100%にしたいのですが、高さは500pxのままにしてください。

画像をdivに収め、その中に

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

しかし、うまくいきません。

ありがとうございました！

icedwater
編集された質問 25日 6月 2013 в 6:41
プログラミング
html css twitter-bootstrap
25日 6月 2013 в 6:37
16 ビュー
ソリューション

問題はここ、ブートストラップ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値で、制限を解除します。

[あなたのフィドルが更新されました。

解説 (2)

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。

これが誰かに役立つことを願っています。

解説 (1)

カルーセルアイテム内の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;
}
Simple Sandman
編集した答え 30日 8月 2014 в 6:07
解説 (0)

以下のように、carousel.cssの行からheightの行をコメントアウトすることで実現できた：

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}
解説 (0)

このコードはついに私のために働きました:

.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;
}
解説 (2)

アスペクト比を維持するためカルーセルdivの完全なカバレッジ:

img {
object-fit: cover;
overflow: hidden;
    }
解説 (0)

他の人が述べたように、css3はこれのためにうまく機能します。 コンテナの全幅、固定高さを使用して、画像保持アスペクト比を「カバー」でスケーリングし、オーバーフローを捨てました。

.carousel .carousel-inner img {
  width: 100%;
  height: 30em;
  object-fit: cover;
  overflow: hidden;
}
解説 (1)

どうやら、上記のソリューションは私にはうまくいきませんでした(理由はわかりません)?)しかし、私は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();
        }

    }

それは私にはうまくいくようです。

それがあなたのためにもうまくいくことを願っています。

アスペクト比を自分で設定するか、別の方法を使用できます。 まず、ウィンドウの幅と高さを、画像が適切にフォーマットされているように見えるビュー次元に設定します。 幅と高さを照会し、比率を計算します。 ウィンドウを元の幅と高さに戻します。 ユーザーは変更にまったく気づかないでしょうが、寸法は記録されます。

解説 (0)