0

私はこのhttp://jsfiddle.net/Zex4S/1/のようなものを達成しようとしているので、ウィンドウのサイズを変更すると、画像の縦横比が維持されますが、同時に、この高さは必要ありません画像を変更するには、一定のままにし、必要に応じてズームインする必要があります。

上と左の余白をトリミングする必要があると思いますが、うまくいきません

このようなもの$this.css('margin-left', ($window.width() - this.width) / 2);

どんな助けでも大歓迎です！

4

2 に答える 2

1

ウィンドウの幅が画像の幅よりも小さい場合は、画像の自然な幅と高さを維持し、コンテナ内で「中央」のままにしたいという意味だと思います。

次のようなものを使用してそれを行うことができます：

var $img = $('img'),
    iw, ww;

$img.load(function() {
    iw = this.width; // save the natural width
});

$img.prop('complete') && $img.trigger('load'); // make sure load() is triggered

$(window).resize(function () {
    ww = $(this).width();
    if ( iw > ww ) { // if window width is less than image width, adjust margins
        $img.css('marginLeft', (iw-ww)/-2);
    }
}).trigger('resize');
于 2013-01-30T18:24:28.793 に答える
0

img タグを背景画像付きの div に交換してもかまわない場合は、この 100% CSS を使用できます。画像の URL をインライン スタイルとして追加するだけで、成功です。

dom に img が必要な場合は、常に .image コンテナー内に保持し、コンテナーのフル サイズに合わせてサイズを変更できますが、透明にすることができます。ちょっとした考え。

jsfiddle: http://jsfiddle.net/JTV66/

HTML:

<div class="image" style="background-image: url(http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg)"></div>

CSS:

body, html{
    width:100%;
    height:100%;
}

.image{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}
于 2013-01-30T21:17:22.043 に答える