4

3 つの画像を含む単純な html + css ページがあります。ブラウザウィンドウのサイズに応じてページのサイズを変更しようとしています。現在、周囲のコンテナーのパーセンテージとして高さに設定された div に 3 つの画像があり、画像は高さ:100% と幅:自動に設定されています。現在、ウィンドウ全体のサイズを変更すると問題なく動作しますが、幅のみを変更すると、もちろん高さが変わらないためサイズが変更されず、ページを押し下げられてしまいます。これは本当に醜いです。

私の最初の質問: html/css だけを使用してブラウザーの高さまたは幅を変更しても、画像のサイズを変更する良い方法はありますか? そうでない場合は、jquery を使用する必要がありますか?そうであれば、適切なリソースを教えていただけますか?

2 番目の質問: それが不可能な場合、どうすれば少なくとも彼らが列にぶつかるのを防ぐことができますか? オーバーフローを隠したりスクロールしたりしようとしましたが、それでもぶつかってしまい、縦にスクロールする必要があります。

ライブ ページへのリンクは次のとおりです。他に情報が必要な場合はお知らせください。

関連するcssは次のとおりです（imgコンテナはbody内のfadingtext内にあります）：

body,html{
height:100%;
margin:0; padding:0;
}

#imgcontainer{
height: 100%;
width: 90%;
display: inline-block;
}

img { 
max-height:90%; 
width: auto;
}

#fading_text {
text-align: center;
height: 60%;
-webkit-animation: fade-text 20s 1;
-moz-animation: fade-text 20s 1;
}

3 つの画像があることを明確にするために、関連する html を次に示します。

<div id="fading_text">
<div id="imgcontainer">

<a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border">  </a>

</div>
</div>
4

1 に答える 1

2

ResponsiveUI に関する記事を探してみてください。多くの有用な情報が得られます。「自動スケーリング」は、次のコードで実行できます。

<div class="wrapper">
 <img src="img.png">
</div>

    .wrapper img {
     width: 100%;
     max-width: 100%
     height: 100%;
    }
于 2012-11-27T14:58:42.650 に答える