javascript - Jquery、高さを一定に保ちながら幅で画像のサイズを変更

Question

高さは一定で、ページのサイズが変更されると幅が小さくなるように、画像のサイズ変更/トリミングを行うにはどうすればよいですか?

こちらのカルーセルで見られるのと同じ効果:

http://dai.com/

ありがとう、

Answer 1

ウェブサイトの画像をよく見ましたか？サイズ変更ではないので！imgプロパティとして要素の中央に配置されbackgroundます。画面の幅を変更すると、画像の中心が調整されていることがわかります。

backgroundプロパティのみを使用してこの効果を実現するのは非常に簡単です。

background: url("img path") 50% 0 no-repeat;

背景画像は要素の高さを取得します。

例：ここ

Answer 2

関数を「サイズ変更」イベントにバインドし
、画像に高さと幅の代わりに最大幅と最大高さを指定する必要があります。

 function imageresize() {  
 if (($(window).width()) < '800'){  
 $('#img').css('max-width',$(window).width());  
 } else {  
 $('#img').css('max-width','');  
 }  
 }  

 imageresize();

 $(window).resize(function(){
 imageresize();  
 });

jsFiddle を添付しました: http://jsfiddle.net/gGBRF/

Answer 3

@Svenが言ったように、サイズが変更されているのではなく、中央に配置され、ブラウザーのサイズが変更されているため、両側からオーバーフローしているように見えます。