2

ページ全体に 4 列の画像がある Web サイトを構築しようとしています。ユーザーがブラウザのサイズを変更すると、それらの画像のサイズももちろん比例して変更されます。私の問題は、ウィンドウが画像の最大幅サイズよりも小さい場合、それらの画像を適切にサイズ変更できることです。ただし、ブラウザーが大きい場合は、列の間に大きなギャップがあります。画像を隙間なく重ねて配置したいです。何か案が？私の別の解決策は、ブラウザが大きい場合、画像の列をページの中央に配置したいのですが、まだ互いに重なり合っています。その方法がわかりませんでした。

コードは以下のとおりです。

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

画像を「固有の」幅よりも大きくしたくないと思いますか?

画像の最大幅がわかっている場合は、100% 幅 (midbody から継承) である "midbody" 内に含む DIV を追加できますが、その中の画像の合計最大幅の最大幅があります: .. .

画像の合計最大幅がわからない場合は、最大幅を継承する DIV を取得できないため、javascript や PHP などを使用する必要があると思います。

于 2012-11-19T19:48:45.013 に答える
0

最大幅を使用する代わりに img クラスを width:100% に設定できない理由は何ですか?

于 2012-11-19T19:22:17.850 に答える