Question

我正在使用一个div，其尺寸是使用jquery设置的，但我希望在该div中显示一个图像，我也希望图像相应地调整大小以完全适合div。

如何做到这一点???

Answer 1

如果您使用jQuery来处理DIV元素的参数，那么您可以使用相同的方法来处理图像的高度/宽度。你可以尝试类似的东西：

var MyImg = document.getElementById(img_id);
var Div = document.getElementById(div_id);
document.MyImg.style.height = document.Div.style.height;
document.MyImg.style.width = document.Div.style.width;

如果要留下一个小边框，请从高度和宽度中减去几个像素，并将图像水平和垂直对齐。

Addon：或者，您可以将CSS属性设置为：身高：自动; width：auto;

我理解你想使用jQuery，我的不好......

Answer 2

您只需将图片设置为div的背景，并将background-size设置为100%：

background: url(http://www.google.com/intl/en_com/images/srpr/logo1w.png) no-repeat;
background-size: 100%;

工作示例（如果您愿意，可以使用div宽度播放）：

http://jsfiddle.net/KWKuG/

Answer 3

您可以使用CSS在图像上设置最大宽度和高度100％：

img {
max-width:100%;
max-height:100%;  
}

这样，您将保持图像的宽高比。

Answer 4

不确定你是否真的想要像这样扭曲图像，但你可以用css设置它。

#yourDiv img { width: 100%; height: 100%}

示例：http://jsfiddle.net/Shx3z/1/

根据屏幕大小设置图像和div宽度

4 个答案: