0

モバイル Web サイトを設計していますが、個人のブラウザー サイズに合わせて、使用している画像を流動的にしたいと考えています。ただし、ブラウザーの解像度が高すぎたり、次のメディア クエリから抜け出したばかりの何かで Web サイトにアクセスしたりして、見栄えが悪くなってしまうことは望ましくありません。それで、画像の最大幅を設定できるかどうか疑問に思っていますか? たとえば、画像の幅を 90% に設定すると、次のように表示されますが、最大長は 500px で、その後は 500px と表示されます。(divラッパーなどの他の要素でもこれを行いたい)

また、%を使用すると、画像は同じ縦横比を維持しますか?

4

1 に答える 1

2

の正しい動作はmax-width、画像のwidth. そのようです:

img {
    width: 90%;
    max-width: 500px;
}

MDN ページ: https://developer.mozilla.org/en-US/docs/CSS/max-width#Notes

于 2012-09-09T11:23:18.613 に答える