ブラウザのサイズ変更のための比例画像幅を設定します

StackOverflow https://stackoverflow.com/questions/1106284

  •  12-09-2019
  •  | 
  •  

質問

私はスタイルと組み合わせたイメージを持っている場合：

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

img.test { width: 50%;}

イメージが50％にそれを含むボックスの幅、ならびにアスペクト比を維持し、垂直方向にサイズ変更のサイズを変更します。

これは、特定の幅と高さの値に設定する包囲DIVを必要とすると思われます。あなたは、ブラウザが小さくても大きく引きずられるよう囲むDIVを自動的にサイズを変更したい場合はしかし、これは問題ではないでしょうか？

役に立ちましたか？

解決

私はあなたの<のhref = "https://stackoverflow.com/questions/1105633/automatic-image-resizing-in-a-css-flow-layout-to-simulate-a-に私の答えを明らかにしましたHTMLテーブルレイアウト/ 1106198＃1106198" >元の質問に。見て行くと、それは物事をクリアした場合に参照してください。あなたがイメージがウィンドウにサイズを変更したい場合は、多かれ少なかれ、あなたは<全角> のできない固定幅と高さにDIVを設定します。 DIVはまた％の幅と高さを持っている必要があります。

他のヒント

は、手動でその寸法を維持するために画像を取得するためにwidthとheightプロパティを指定する必要があります。あなたは、サーバー側のコーディング（PHP / ASP）を使用している場合、これはあまりにも難しいことではないでしょう。

それを行うための別の方法は、動的に画像を計算し、サイズを変更するためにJavaScriptを使用するようになります。

いいえ、画像はまだDIVの50％になります、とdivが重要ではありませんページの割合、であるならば。

そのすべての割合：囲むdivがウィンドウ全体の2/3であるかもしれない、と画像はその1/2をWILます。その、数値演算のちょうど束を表示する前に、それはすべてが計算されます。 ; D

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top