レスポンシブの忘備録

8月の日にちが過ぎ、立秋が過ぎつつ、猛暑日が続きますね…

体調には気を付けて、水分補給もまめに取ってくださいね。

ついでに、塩分補給も忘れないようにね!

さてと、話題に戻して…

レスポンシブの忘備録

レスポンシブ対応していく中で、たまにレイアウトがおかしかったり、くずれたりしてしまいます。

画像対応の忘備録として、メモを記載しておきます。

このブログを見ていただいている方、ご参考までに。

何か漏れとかあったらご指摘してくださいませ。

@media screen and (max-width: 768px) {
	img{
		height:100%;
		max-height:100%;
		max-width:100%;
		width:100%;
	}
}

これぐらいでしょうか。

画像

レスポンシブ対応をする場合は、「width=”auto”」を記載したほうが無難でしょう。

仮に高さを「height=”100px”」に記入すると、レスポンシブ対応しているスマホで閲覧すると縦が伸びて気持ち悪い画像になってしまいます。

高さを省略して、「width=”auto”」だけ記入しといたほうがいいですね。

幅だけ可変サイズとして表示をしたい場合は、CSSに記述をしといたほうがいいですね。

たったこれだけの忘備録でした。

お付き合いいただきありがとうございました。

ではまた!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む