自動更改圖像寬度/高度

Question

使用JS/JQuery如何根據背景DIV標記或窗口自動更改圖像寬度/高度？

Answer 1

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

對於動態的高度，你應該看到jQuery.height()

使用JavaScript可以動態使用此

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

您可以使用jQuery的width()功能改變高度雙方確定的寬度窗口和/或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> 

現在，你甚至可以使用jQuery動態地更改背景圖片，寬度&高度的div。

background-size: contain; 

有竅門。

但它是一個css3屬性。它不會在< = ie8中工作。