6月になって日にちが経ちますが…

梅雨入り宣言早く来て、早く梅雨上げ宣言になってほしい気分です…

しかもこっちは早く夏が来て、年中夏であってほしい気持ちでたまりません！

梅雨前線、そろそろ北上してくれへんかな…

天気予報のニュースを見る限り、ずっと九州南下ばっかり停滞してるんじゃねぇか！

早く6月中に北上してくれ！

北上して、6月までに梅雨明け宣言してほしいんやけど！

しかも、今年は「気象病」にならないことを…

話変わりますが…

レスポンシブ対応するときの画像の大きさはどうしてるか？

スマホ表示するとき、画像が自動的に可変サイズにしたいときありますよね。

こっちは今まで、スマホ表示用とPC表示用に切り替えられるように画像を設定していましたが…

なんかめんどくさくて作業時間のロスになりますね…

画像の設定はいつも通りのコードを書きますね。

<img src="./img/sample.jpg" alt="イメージ画像" height="500px" width="500px" />

500pxの正方形の画像の表示ができました。

しかし、レスポンシブ対応するときはどないしてるん？

答えは簡単！

「height=”500px” width=”500px”」の属性を消すことです。

<img src="./img/sample.jpg" alt="イメージ画像" />

では、CSSのほうはどう設定しているか？

img {
	line-height: 1;
	margin: auto;
	padding: 0;
	width: auto;
}

これはPC表示時の設定ですね。

レスポンシブ対応の画像表示方法はどないしているか？

@media screen and (max-width: 768px){
	img {
		line-height: 1;
		margin: auto;
		max-height: auto;
		max-width: 100%;
		padding: 0;
		width: 100%;
	}
}

っていうところでしょうか。

あとは、「Class」を付けて画像の可変とかも調整してみてくださいね。

では、また！