0

写真を表示する必要がある Web サイトを開発しています (問題ありません)。ただし、次のリンクとして表示する必要があります: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

そのため、サイズを変更するときは、拡大縮小しないように画像をズームする必要があります。それを行う方法を知っている人はいますか？

ここに私が持っているものがあります:

html:

<div id="container_images">
    <ul>
        <li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
    </ul>
</div>

CSS:

#container_images{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#container_images li{
    display: block;
    list-style: none;
    z-index: -30;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:1;
}

#container_images li img{
    width: 100%;
    height: 100%;
    display: block;
}
4

1 に答える 1

1

私が正しく理解していれば、ブラウザの組み込みのズーム（ctrl +）は必要ありません。ウィンドウのサイズが変更されたときに、ブラウザのウィンドウ全体を画像で塗りつぶしたいだけです。

そのためには2つのことが必要です。

まず、ウィンドウのサイズ変更イベントで実行する JavaScript が必要です。次に、新しいウィンドウ サイズを考慮して画像の中心を計算し、画像の左/上マージンを新しい値に設定する簡単な計算が必要です。

jQueryを使えば簡単にできます:

$(window).resize(function() {
    var h = $(window).height();
    var w = $(window).width();
    var pic = $('#container_images img');
    var pic_width = pic.width(), pic_height = pic.height();

    $(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});

覚えておくべきことの 1 つは、画像の幅/高さが元のサイズから既に変更されている場合、width() および height() 関数からその新しいサイズを取得することです。

したがって、元の画像に触れていないことを確認するか、元の画像のサイズを取得するためにそこにあるソリューションの 1 つを使用する必要があります (たとえば、jQuery を使用して実際の画像の幅と高さを取得するにはどうすればよいですか? )。

また、上記のスニペットは、開始するためのものです。画像とそのパラメーターをいくつかの init 関数で取得し、サイズ変更イベントでのみ css を再計算/変更する必要があります。

于 2013-02-26T17:36:13.300 に答える