6

画像を除いて、完全にスケーリング可能なシンプルなウェブサイトを作成しました。本体とすべて、div はパーセンテージに設定されています。実際、この方法で設計した私の目的は、任意の画面解像度にスケーリングするサイトを作成する練習をすることでした。画像以外はすべてスムーズに進みましたが、ページの残りの部分はブラウザーで拡大または縮小し、画像はオーバーフローするか、小さくなります (ブラウザーでズームインおよびズームアウトすると)。画像の幅と高さをパーセンテージで設定しても機能しません。ブラウザーを水平または垂直に引き伸ばしすぎると画像が歪むからです。

注:オーバーフローを非表示にする必要はありません。正しければ、画像が大きくなったときに画像が切り取られるだけです(ここで間違っている場合は修正してください)

高さ/幅を最大/最小に設定することも、理想的な解決策のようには思えませんでした。

しかし、この問題は他の人が遭遇していないとは信じられないように思われるので、誰かが解決策を見つけるのを手伝ってくれることを願っています. 助けてください...これは私にストレスを与えています:(

4

3 に答える 3

11

img タグのスタイルを設定します。

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

画像を含む要素のサイズを調整すると、それに応じて画像がスケーリングされます。

于 2011-10-24T19:58:28.280 に答える
0

高さまたは幅のどちらか重要な方を設定してみてください。両方を設定すると、ブラウザはルールに従います。幅を設定しただけの場合、ブラウザはそれに応じて高さを縮小します。

于 2011-10-24T19:51:23.017 に答える
0

私もこのようなプロジェクトに取り組んでおり、使用しました

img { width: 100%; }

同様に、それに応じて各画像の周りのdivのサイズを確認してください。

特定のサイズで画像が歪むという懸念は理解していますが、私にとっては、ここでスケーリング機能が最も重要でした。対象ユーザーのサイズに合わせて画像を作成しました。

鮮明に見える最大サイズで画像を作成する場合は、縮小する必要があります。帯域幅が問題になる場合は、ファイル サイズに注意してください。

于 2011-10-24T20:07:50.813 に答える