width - レスポンシブ Web デザインの幅と最大幅

Question

レスポンシブ Web デザインに関するチュートリアルでは、画像を柔軟にするために max-width:100% を使用することをお勧めします。この目的で width:100% を使用できるのはなぜですか?

Answer 1

私は同じ質問をしており、少し実験した後の答えだと思います：

width:100%;何が起こっても画像の幅をスケーリングします。

• 100%がそのイメージの元の解像度よりも大きい場合、イメージは拡大縮小し続けるため、ぼやけて見えます。
• がheightその画像に割り当てられると、幅は拡大縮小し続けるため、引き伸ばされます。

max-width:100%;画像の幅をより慎重にスケーリングします。

• 100%その画像の元の解像度よりも大きい場合、画像はスケーリングを停止し、繊細に見えます。
• がheightその画像に割り当てられると、幅のスケーリングが停止し、縦横比が維持されます。

max-widthだから私はこれが人々がではなくを使用している理由だと思いますwidth。

実験のスクリーン キャプチャ:こちら(スケッチ画像は 600 px * 432 px)

実験ページ：こちら

Answer 2

幅が 200px の画像などの小さな画像は、常に親コンテナーの幅に拡張されます。これは、大きな画面ではさらに広くなる可能性があります。その結果、アーティファクトが目に見えるため、見栄えがよくないアップスケールされた画像になってしまいます。