Question

我正在尝试建立一个网站，其中包含跨越整个页面的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 */
}

Answer 1

我猜你不希望图像比它们的“内在”宽度更大？

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

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

调整窗口大小时调整图像大小而不留下图像之间的间隙

1 个答案: