/* ——————–01：width100%のみ———————- */
- /* 画像元サイズ326×326*/
- /* width:100%;のみ。親要素のwidth指定なし */
#photo1 img{width:100%; height: auto; /* 縦幅を自動調整 */}
/* ——————–02：width100%+親要素500px———————- */
- /* 画像元サイズ326×326*/
- /* width:100%;のみ。親要素はwidth:500px; */
- /* 親要素にwidth指定あり+width:100%;は親要素に対して100％になるので最初のmax-width: 100%;は反映されない */
#photo2{ width:500px;}
#photo2 img{width:100%; height: auto; /* 縦幅を自動調整 */}
/* ——————–03（min-width）：min-width———————- */
- /* 画像元サイズ1280×720*/
- /* width:100%;のみ。親要素はwidth:50％ */
- /* ＜使いどころ＞ widthを%で指定したときに、min-widthはセットで使うと便利です。たとえばwidth:50%のとき、ウェブページを見る端末（ブラウザ）のサイズによって要素が小さくすぎたり、大きすぎたりするわけです。「PCでみる分にはwidth:50%はちょうどいい大きさだけど、スマホでは小さすぎる」ということがレスポンシブ対応のウェブサイトを作っているとよく起こります。*/
#photo3{ width:50%;}
#photo3 img{width:100%;min-width: 300px; /* 最小値を設定。ウィンドウを300px以下にしても画像は300px以下にはならない */height: auto; /* 縦幅を自動調整 */}
/* ——————–04（max-width）———————- */
- /* 画像元サイズ1280×720*/
- /* width:100%;のみ。親要素はwidth:80％ */
- /* ＜使いどころ＞ たとえば要素がwidth:80%のとき「スマホで見るとちょうど良い大きさなのに、PCで見るとでかすぎる！」なんてことがよくあります。そんなときmax-width（最大幅）が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない！」という設定ができるわけですね。*/
#photo4{ width:80%;}
#photo4 img{width:100%;max-width: 600px; /* 最大値を設定。ウィンドウを600px以上にしても画像は600px以上にはならない */height: auto; /* 縦幅を自動調整 */}
/* ——————–05（max-width+min-heigth）———————- */
- /* 画像元サイズ1280×720*/
- /* width:100%;のみ。親要素はwidth:80％。heightに最小値を指定。*/
- /* ＜使いどころ＞ たとえば要素がwidth:80%のとき「スマホで見るとちょうど良い大きさなのに、PCで見るとでかすぎる！」なんてことがよくあります。そんなときmax-width（最大幅）が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない！」という設定ができるわけですね。min-heightで縦幅を調整。*/
#photo5{ width:80%; overflow: hidden;}
#photo5 img{width:100%;max-width: 600px; /* 最大値を設定。ウィンドウを600px以上にしても画像は600px以上にはならない */min-height:300px;/* 縦幅の最小値を設定。ウィンドウを300px以下にしても画像は300px以下にはならない。画像を大きめにしたい 時に便利*/}