0

youassist.orgで見られるのと同じことをしたいです。

スライド ショーの画像を見て、ブラウザ ウィンドウのサイズを変更してみてください*。画像の表示で 2 つの「動作」を確認できます。

  1. ウィンドウを大きくすると、画像が徐々に拡大されます。
  2. 小さいウィンドウ**では、画像はズームアウトしませんが、水平方向にスクロールします。

私はそうしようとしています。これは私がこれまでに得たものですが、大きなウィンドウから小さなウィンドウにサイズ変更した場合にのみ機能しますが、その逆は機能しません。

ここにフィドルがあります：

HTML:

<div class="page-header-2">
    <img class="img-header" src="http://youassist.org/assets/home1.jpg" />
</div>

CSS:

.page-header-2{
    height:350px;
    overflow:hidden; 
    width:100%;
    background:red;
}
.img-big{
    width: 100%;
}
.img-small{
    height: 100%;
    max-width: none;
}

脚本：

var imgH = $(".page-header-2 img").height();
var divH = $(".page-header-2").height();

if(imgH <= divH){   
    $(".page-header-2 img").addClass("img-small");
} else {
    $(".page-header-2 img").addClass("img-big");
}

$(window).resize(function() {
    var imgH = $(".page-header-2 img").height(); 
    var divH = $(".page-header-2").height(); 

    if(imgH <= divH){   
        $(".page-header-2 img").removeClass("img-big");
        $(".page-header-2 img").addClass("img-small");
    } else {
        $(".page-header-2 img").removeClass("img-small");
        $(".page-header-2 img").addClass("img-big");
    }
});

*: ウィンドウのサイズを徐々に変更し、サイトがモバイル向けのレスポンシブ サイトとして再編成されるポイントを超えないようにしてください。私はそれで興味がありません ！

**: 「小さいウィンドウ」は正しくありません。この動作は、画像サイズがウィンドウ サイズよりも小さい場合に発生すると思います。

4

2 に答える 2

1

これを行う 1 つの方法は、単純な CSS を使用することです。これをチェックしてください：http://jsfiddle.net/panchroma/XBuGc/

すべての JavaScript を削除し、いくつかの CSS を追加しました 

.img-header{
width:100%;
height:auto;
min-width:450px; /* adjust as necessary */
}

お役に立てれば！

于 2013-06-05T22:57:17.083 に答える
1

「新」background-sizeルールの適用のようです。イメージ タグに入れる代わりに、コンテナーの背景にイメージを配置し、ダミー要素を使用して縦横比を設定します。

<div class="img-header">
    <div class="aspect"></div>
</div>

.aspect {
    padding-top: 50%;
}
.img-header {
    background: url(url) center center / cover;
    min-height: 200px;
}

おそらく内部にもコンテンツを配置したいので、絶対配置が必要です。そうしないと、ダミー要素 ( .aspect) が配置を壊してしまいます。このために、コンテナー ( img-header) は相対的な配置が必要で、コンテンツは上/右/下/左がゼロの絶対位置が必要です。このためのフィドルのバージョンも作成しました。

JSFiddles:

  1. http://jsfiddle.net/dualed/gkBM5/ (基本)
  2. http://jsfiddle.net/dualed/gkBM5/1/ (コンテンツ要素あり)
于 2013-06-06T08:20:45.510 に答える