HTMLテーブルレイアウトをシミュレートするためのCSSフローレイアウトでサイズ変更自動画像

Question

画面の解像度に応じて、幅と高さを静的値に設定しているため、CSSフローレイアウトで見えなくなる画像があります。

誰かがブラウザウィンドウを小さくしている間に、CSSフローレイアウトに画像を自動的にサイズ変更する方法はありますか？これがHTMLテーブルレイアウトで行われているのを見てきましたが、テーブルがそれを可能にしていると思います - CSSフローレイアウトでこれを行う方法はありますか？

Answer 1

クイックテストでは、これが次のことを示しています。

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

と組み合わせ：

img.test { width: 50%; }

おそらくあなたが望む方法をサイズ化します。画像は、ボックスを含む幅の50％に忠実にサイズを変更し、アスペクト比を維持し、垂直にサイズを変更しました。

垂直方向の変更に基づいてサイズ変更に関しては、少なくとも一貫してではないように機能しません。私は試した：

img.test { height: 50%; }

現在のGoogle Chrome（2.0.172）では、やや一貫してサイズを変更します。サイジングは正しいですが、ウィンドウのドラッグごとに更新されません。現在のFirefox（3.5）では、高さは完全に無視されているようです。テストするために、最近のリモートで最近のIE、Safariなどはありません。これらの結果を自由に編集してください。たとえそれらがうまくやっていても、おそらくあなたが避けたいものであり、幅に固執します。

編集：これが機能するためには、img.testを含むすべての要素は、静的ではなく、パーセンテージでサイズを変更する必要があります。

このように考えてください：

• ボディはウィンドウサイズの100％です。
• IMGは体の50％です。
• IMGはウィンドウサイズの50％です。

次に、divを追加します。このような...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

それで

• ボディはウィンドウサイズの100％です。
• Divは100pxで、体の幅を無視しています。
• IMGはdivの50％です。
• IMGは、ウィンドウサイズに関係なく50pxです。

divに「幅：100％」がある場合、ロジックは以前と同じように動作します。固定されていない割合で、IMGの割合で遊んで、必要なサイズを動作させることができます。

Answer 2

私のCSSはごみだから少し推測しますが、誰も答えていないので、画像に％幅または高さを設定して、親の割合になるようにすることはどうでしょうか。 dunno？

Answer 3

最大幅を95％のようなものに設定してみてください。コンテナの幅が画像の幅よりも少ない場合、画像が縮小する方法に感謝します。すべての親コンテナはadjuにする必要があります

max-width:95%;