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属性。它不适用于＆lt; = ie8。

自动更改图像宽度/高度

5 个答案: