レスポンシブの忘備録
2023年8月14日
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に記述をしといたほうがいいですね。
たったこれだけの忘備録でした。
お付き合いいただきありがとうございました。
ではまた!