カテゴリー: study

画面サイズに連動させつつ、最大・最小サイズを指定する方法

親要素にwidth: 100%; と 最大幅　例えば max-width: 960px; を指定し、 画像要素に width: 100%;を指定する。

html

<div id="main_container">
<img src="img/main.jpg" class="img-main">

CSS

.main_container {
margin: 0 auto; overflow: hidden; width: 100%; max-width: 960px;
 }

.img-main {
     width: 100%;
 }

参考サイト

ウインドウ幅に合わせて画像サイズを変化させる方法