自動変更イメージの幅/高さ

Question

JS/JQueryの使用方法背景のDIVタグまたはウィンドウに基づいてイメージの幅/高さを自動的に変更するにはどうすればよいですか？ダイナミックな高さのために

Answer 1

<div id="background-div"> 
<img src="xxxx.jpg" width="100%" height="100%"/> 
</div> 

あなたはあなたが幅を決定するためにjQueryのwidth()機能の両方を使用することができ、この

var windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
document.getElementById("background-div").height = windowHeight + "px"; 
or 
document.getElementById("background-div").style.height = windowHeight + "px"; 

Answer 2

を使用して動的に高さを変更することができますjavascriptを使用してjQuery.height()

が表示されますウィンドウおよび/またはdivを選択し、画像の幅を割り当てることもできます。

var windowWidth = $(window).width(); 

$('img').width(windowWidth); 

Answer 3

jquery width（）とheight（）メソッドを使用するか、cssを使用すると次のルールを指定できます。

img{ max-width:100%;} 

これは、親のdivディメンションに基づいてイメージのディメンションを設定することに注意してください。

Answer 4

ここをクリックhttp://www.cssplay.co.uk/layouts/background.html 100％幅を背景にして表示してイメージを作成する方法のデモです。

Answer 5

私はこれにcssを使用します。

CSS

.bg-Image { 
background-image: url(); 
background-size: contain; 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-color: transparent; 
width: desiredWidth; 
height: desiredHeight; 
} 

HTML

<div class="bg-Image"></div> 

今すぐあなたも動的背景画像、div要素の幅&高さを変更するためにjqueryのを使用することができます。

background-size: contain; 

です。

しかし、これはcss3プロパティです。 < = ie8では動作しません。