自动更改图像宽度/高度

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中工作。