[英]how to proportionally resize div with an image inside
OK, so I have a full screen background image which uploads via flash 好,所以我有一个全屏背景图片,该图片通过Flash上传
flash {
position: absolute;
top: 0;
left: 0;
z-index: 1; }
It resizes perfectly, I also have a footer at the bottom as div and 5 images inside it. 它的大小调整得很完美,我在div的底部还有一个页脚,其中有5张图像。 I aligned all images in one row but as a browser resizes images jump up instead of resizing proportionally.
我将所有图像对齐成一行,但是随着浏览器调整图像大小,图像会跳起来,而不是按比例调整大小。 Would appreciate your advice.
非常感谢您的建议。 Here is the link to jsFiddle http://jsfiddle.net/eglemei/LqBzY/
这是jsFiddle的链接http://jsfiddle.net/eglemei/LqBzY/
Your images aren't resizing because you haven't told them to resize. 您的图片没有调整大小,因为您没有告诉他们调整大小。 Proportional resizing isn't default behavior.
比例调整大小不是默认行为。 Images will only resize themselves in proportion to their containing element if they're giving a
width
or height
value in percentages. 如果图像以百分比形式给出
width
或height
值,则图像将仅根据其包含的元素调整其大小。
Once you've specified a percentage height
or width
, the images will be scaled according to the closest parent element with an explicitly set position
attribute (which in your case is 'div#footer'. If you do set a percentage width
, then as long as you don't specify a height
elsewhere, the images will keep their aspect ratio. 指定
height
或width
百分比后,图像将根据最近的父元素缩放,并带有一个明确设置的position
属性(在您的情况下为'div#footer'。如果您设置了百分比width
,则按只要您未在其他位置指定height
,图像就会保持其纵横比。
Change the CSS for the images to something like this: 将图像的CSS更改为如下所示:
#sponsors img {
margin-right: 3%;
width:16%;
}
You'll also need to remove the height="100px"
from each img
tag, otherwise the img
will use that height. 您还需要从每个
img
标签中删除height="100px"
,否则img
将使用该高度。
I've updated your jsFiddle accordingly: http://jsfiddle.net/LqBzY/5/ 我已经相应地更新了您的jsFiddle: http : //jsfiddle.net/LqBzY/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.