1

MalsupのCycle2を使用して、別のdivに対応するスライドテキストを含む背景のスライドショーを作成しています。ここにいくつかの簡単なマークアップがありますが、画像を切り抜くことができないため、常にブラウザの高さの100％になります（薄いウィンドウを作成すると、下部に赤が表示されます）。

おそらく解決策はjQueryまたはCSSです—私が見るものはすべてheight:auto、画像と親divで使用することを示唆していますが、役に立ちません。

jsfiddle

<div id="background" class="cycle-slideshow" 
                     data-cycle-fx="scrollHorz" 
                     data-cycle-timeout="2000"
                     data-cycle-slides="> div"
>
    <div style="background:#fcc">
        <img src="http://stoptraining.me/staged/IMG_1402.jpg">
    </div>
    <div style="background:#cfc">
        <img src="http://stoptraining.me/staged/IMG_1403.jpg">
    </div>
</div>

<div class="center">
    <div id="text" class="cycle-slideshow" 
                   data-cycle-fx="fade" 
                   data-cycle-timeout="2000"
                   data-cycle-slides="> div"
    >
        <div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor ...</p>
        </div>
        <div>
            <p>Mel eu pertinax ...
        </div>
        <div>
            <p>Utinam electram pertinacia ...
        </div>
    </div>
</div>

CSS：

body, html {
    background: red;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
}
#background {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 99;
    overflow: hidden;
}
#background div {
    width: 100%;
    height: auto;
    background-size: cover;
    overflow: hidden;
}
#background div img {
}
img {
    width: 100%;
    height: auto;
}
#text {
    position: relative;
    text-align: center;
    z-index: 99;
}
.center {
    background: white;
    padding: 200px 0 0 0;
    width: 400px;
    overflow: auto;
    min-height: 1000px;
    margin: auto;
    z-index: 9999;
    position: relative;
    text-align: center;
}
4

1 に答える 1

6

現在、どちらの側が大きいかに基づいて要素がアスペクト比を維持するのに役立つCSSスタイルはありません。したがって、JavaScriptを使用する必要があります。

これが動作するjsFiddleで、これはあなたが望んでいることを実現します。

上記のソリューションには、元のソリューションからのいくつかの変更が含まれています...

CSS：

削除する：

#background div img {
}
img{
    width: 100%;
    height: auto;
}

変化する：

#background {
    /* ... */
    /* make sure width and height are 100%! */
    width: 100%;
    height: 100%;
    /* ... */
}
#background div {
    /* ... */
    /* make sure width and height are 100%! */
    width: 100%;
    height: 100%;
    /* ... */
}

追加：

#background div img.wider {
    width: 100%;
    height: auto;
}
#background div img.higher {
    width: auto;
    height: 100%;
}

JavaScript：

var imgWidth = 1600;
var imgHeight = 1067;
var imgRatio = imgWidth / imgHeight;

$(ResizeBackground); // call on initialize
$(window).resize(ResizeBackground); // and on resize

function ResizeBackground() {
    var div = $('#background');
    var divWidth = div.width();
    var divHeight = div.height();

    // if the div's ratio is higher than the image, it means that
    // the div is wider than the image (and the background will be seen on the sides).
    // Else, the div is higher and will display the background on the bottom.

    // this condition will change the images proportion to always fill the background.
    if (divWidth / divHeight > imgRatio) {
        div.find('img').removeClass('higher').addClass('wider');
    } else {
        div.find('img').removeClass('wider').addClass('higher');
    }
}

アップデート

比例したサイズで画像を中央に配置するには、次の計算を使用する必要があります。

var $imgs = div.find('img');

if (divRatio > imgRatio) {
    $imgs.each(function () {
        var $this = $(this);
        // set a negative top margin (and move the image up)
        $this.css('margin-top', -Math.abs(div.height() - $this.outerHeight()) / 2);
    });
} else {
    $imgs.each(function () {
        var $this = $(this);
        // set a negative left margin (and move the image to the left)
        $this.css('margin-left', -Math.abs(div.width() - $this.outerWidth()) / 2);
    });
}

jsFiddleを少し更新しました。それを見て、古いものとの違いを確認し// NEW!!てください。

于 2013-03-27T19:38:59.407 に答える