html - ブラウザのサイズ変更に比例した画像幅を設定する

Question

スタイルと組み合わせた画像がある場合:

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

画像は、それを含むボックスの幅の 50% にサイズ変更され、縦横比を維持しながら垂直方向にもサイズ変更されます。

これには、囲んでいる DIV を特定の幅と高さの値に設定する必要があるようです。しかし、ブラウザーをドラッグして小さくしたり大きくしたりしたときに、囲んでいる DIV のサイズを自動的に変更したい場合、これは問題ではないでしょうか?

score 2 · Accepted Answer

元の質問に対する回答を明確にしました。様子を見に行って、問題が解決するかどうかを確認してください。多かれ少なかれ、ウィンドウに合わせて画像のサイズを変更したい場合、DIVを固定の幅と高さに設定することはできません。DIV には、% 幅と高さも必要です。

score 1 · Accepted Answer

widthおよびheightプロパティを手動で指定して、画像の寸法を保持する必要があります。サーバー側のコーディング (PHP/ASP) を使用している場合、これはそれほど難しくありません。

もう 1 つの方法は、JavaScript を使用して画像を動的に計算およびサイズ変更することです。

score 0 · Accepted Answer

いいえ、画像は引き続きdivの50％になります。また、divがページの一部である場合、それは問題ではありません。

score 0 · Accepted Answer

そのすべての比率: 囲んでいる div はウィンドウ全体の 2/3 である可能性があり、画像はその 1/2 になります。それはすべて、表示される前に計算されます。数を計算するだけです。;D

4 に答える 4