画像の最大幅を設定する (max-width)

画像や埋め込み動画を表示するときに、そのままのサイズで表示すると、画面サイズを縮めた場合に、画面内に収まらなくなってしまいます。 次のように max-width を指定しておくと、ブラウザのウィンドウサイズを変更したときや、モバイル端末のような小さな画面サイズで表示したときも、ちゃんと画面内に収まるように表示されます。

img, embed, iframe, object {
  max-width: 100%;
}

上記のフレームをブラウザだと思ってサイズを縮めてみてください。 表示領域のサイズ変更に連動して画像サイズも縮小されて表示されるはずです。

画面幅に応じて画像を拡大表示する

逆に、画面（ブラウザ）のサイズを広げた場合は、もともとの画像のサイズ以上の大きさでは表示されません。 画面（ブラウザ）のサイズを広げたときに、そのサイズに連動して拡大して表示したいのであれば、max-width プロパティではなく、単純に width プロパティに 100% 指定します。

img {
  width: 100%;  /* 横幅いっぱいに画像を広げて表示 */
}

横幅いっぱいにまで広げてしまうとさすがに大きすぎるけれど、ある程度まで（例えば、横幅の 80% くらいまで）は広げたいという場合は、min-width を指定することで、「少なくともこのサイズまでは拡大して表示する」、という意味になります。 下記の例ではパーセンテージで横幅を指定していますが、px 単位でも指定することができます。

img {
    min-width: 80%;
    max-width: 100%;

    /* 下記は中央寄せ設定 */
    display: block;
    margin-left: auto;
    margin-right: auto;
}