大きめの画像 width: 3600pxと<h1> と <p>をセンター揃えで、body を狭くしても常にセンター揃えになるよう、レイアウトする。.
- max-width: 100%
- 親要素の幅100%に合わせて画像を縮小する。
- 画像の大きさより表示するブロックが大きい時には、拡大しないで画像の大きさそのままで表示する。
- 画像の大きさより表示するブロックが小さい時には、縮小がかかる。だだし、画像の表示領域に高さを指定しないこと。
- 画像の解像度を下げない工夫。
- フルードイメージはimgにしか使えない。background-imageには使えない。
- <img>には幅高さを絶対に指定しない。そうすればスタイルシートで可変できる。
- width: 100%=親要素の幅に対して100%になる。たとえ画素数うが少なくとも。表示するブロック中心。
- max-width: 100%=画像の原寸よりも拡大はしない。画像中心
- 100%に指定すれば、画像は常にセンタリングされて表示される。
html
<body>
<img src="max-width/pic03.jpg">
<div id="text">
<h1>記事のタイトル</h1>
<p>この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。</p>
<p>この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。</p>
</div>
</body>
css 1
img, #text{
max-width: 100%;
padding: 2rem;
box-sizing: border-box;
}
h1{margin-bottom: 1rem;}
#text{line-height: 1.6;}
- <img src="max-width/pic03.jpg" width="3600"height="2850">のように、htmlでimgの幅高さを指定すると、スクイーズがかかって縦に伸びた画像になります。(pcも同様。)