1

私は自分のウェブサイト全体に自分の画像を広げたいと思っていました。私はcssにかなり慣れていないので、おそらく間違いがたくさんあります。

ここでクラスを定義しました：

#galleryphotos { float:left; margin: 0; padding: 0; width: 100%; }
.displayphoto { float:left;  border: none;  margin: none; padding: none; }
img.displayphoto {   clear: both;  display: block; position: relative;  width: 100%;}

そして、ここに表示します：

<div id="galleryphotos"> 
    <div class="displayphoto"> <img src="images/property/DSC_0006.JPG" class="displayphoto"> </div>
    <div class="displayphoto"> <img src="images/property/DSC_0007.JPG" class="displayphoto"> </div>
</div>

ブラウザのサイズを変更すると、ズームが少し発生しますが、それほど大きくはありません。私が間違っているのは何ですか？

ps いじって解決策を見つけました clear: both; width: 100%;。.displayphoto

4

1 に答える 1

0

コードから、提供した画像をフロートする必要はありません。それらを「ブロック」要素として設定すると、それらは独自の行に保持され、「幅：100％;」ウィンドウのサイズを変更すると、コンテナの幅に合わせて塗りつぶして拡大縮小できます。

CSS

#galleryphotos {
   margin: 0;
   padding: 0;
}
.displayphoto {
   display: block;
   position: relative;
   width: 100%;
   border:none;
}

HTML

<div id="galleryphotos">
    <img src="images/property/DSC_0006.JPG" class="displayphoto" alt="DSC_0006" />
    <img src="images/property/DSC_0007.JPG" class="displayphoto" alt="DSC_0007" />
</div>

jsfiddle.net/jonathanglyn/waKSv

写真のスケーリングを維持しながら画像の周りにパディングを追加したい場合は、「galleryphotos」コンテナにマージンを追加し、「displayphoto」クラスにマージン下部を追加することでこれを行うことができます。

また、ウェブサイトのアクセシビリティを向上させるために、画像には常にALT タグを含める必要があります。

于 2013-09-26T11:00:07.980 に答える