2

我正在尝试建立一个网站，其中 4 列图像跨越整个页面。当用户重新调整浏览器的大小时，我希望这些图像也重新调整大小，当然是成比例的。我的问题是，如果窗口小于图像的最大宽度尺寸，我可以让这些图像正确调整大小。但是，如果浏览器较大，则列之间存在较大间隙。我希望图像相互堆叠，中间没有间隙。任何想法？我的替代解决方案是，如果浏览器更大，我希望将仍然相互堆叠的图像列放在页面中间。我不知道该怎么做。

代码如下。

HTML：

<body background="Images/BG_paper_008_dark.jpg">
<div id="header">
<div id="logo"><img src="Images/DTP_logo_final_white.gif" /></div>
<div id="menu">Wedding | Engagement | Family/Portrait | Products | Action | The world through my eyes </div>
</div>

<div id="midbody">
<div id="mainImg1"><img src="Images/FrontPage_L1_Image1.jpg" alt="Horse racing"/>
                   <img src="Images/FrontPage_L1_Image2.jpg" alt="Horse racing"/></div>
<div id="mainImg2"><img src="Images/FrontPage_L1_Image3.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image4.jpg" alt="Horse racing"/> </div>
<div id="mainImg3"><img src="Images/FrontPage_L1_Image5.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image6.jpg" alt="Horse racing"/></div>
<div id="mainImg4"><img src="Images/FrontPage_L1_Image7.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image8.jpg" alt="Horse racing"/></div>  
</div>
</body>

CSS

#midbody {
clear: both;
width: 100%;
text-align: center;
}

#mainImg1 {
width: 25%;
clear: left;
float: left;
text-align: center;

}
#mainImg2 {
width: 25%;
float: left;
text-align: center;
}
#mainImg3 {
width: 25%;
float: left;
text-align: center;
}
#mainImg4 {
width: 25%;
clear: right;
float: left;
text-align: center;
}

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
4

2 回答 2

0

为什么不能将 img 类设置为 width:100% 而不是使用最大宽度？

于 2012-11-19T19:22:17.850 回答
0

我猜您不希望图像的缩放比例大于其“固有”宽度？

如果您知道图像的最大宽度，您可以在“中间体”中添加一个包含 100% 宽（继承自中间体）的 DIV，但其最大宽度为其中图像的总最大宽度：.. .

如果您不知道图像的总最大宽度，我认为您将不得不使用 javascript 或 PHP 或类似的东西，因为您将无法让 DIV 继承最大宽度。

于 2012-11-19T19:48:45.013 回答