比率外の液体レイアウト
Webサイトでリキッドレイアウトを使用していますが、ブラウザーで表示すると、ブラウザーウィンドウのサイズを変更すると、画像が不均衡に引き伸ばされます。誰でも助けることができますか？
CSSで、すべての画像について、widthまたはheight（通常は高さが適切）が特定の値ではなくauto（デフォルト）であることを確認します。これにより、高さ（または幅）が他の寸法と画像の縦横比に従って計算されます。 （参照： CSS 2.1セクション10.6.2 ）
たとえば、画像に対してmax-width: 100%; height: auto;を宣言すると、その中にあるボックス/列よりも広くならず、水平方向のスケーリングに合わせて垂直方向にスケーリングされます。 Stack Exchangeは、質問と回答に含める画像を使用してこれを行います。
テストリンクを提供する必要があります。
とにかく、画像の幅と高さは固定されている必要があり、ウィンドウのサイズを変更する際に画像の縦横比を変更しないでください。
過度のウィンドウのダウンサイジングの後、レイアウト全体が混乱します。しかし、これは私が知る限り避けられないことです。
JavaScriptを使いこなし、サイズのステップに複数の画像を提供したり、バイキュービックサンプリングなどでインテリジェントに縮小したりできます。品質を大幅に低下させることなく、単にラスターイメージのサイズを変更することはできません。