画像のレスポンシブ対応

コピペ投稿者:名無しさん  投稿者ID:dZ1gEbFb
コピペ投稿日時:
大きな画像は、パソコンのディスプレイで表示できても、スマートフォンで見るとはみ出してしまうことがあります。

本ページでは、画像をレスポンシブ対応する方法を説明します。

画像の最大幅を指定する
横幅700pxの画像があったとします。この画像は、スマートフォンで見ると、以下のようにはみ出してしまいます。

画像が横にはみ出していて、木の小屋が半分しか表示されていません。
これを避ける簡単な方法は、max-widthプロパティを使うことです。max-widthは、最大幅を示します。以下は、CSSの例です。

【max-widthプロパティを使うCSS】
.test {
max-width: 100%;
}
クラスtestをimg要素に適用すると、以下のように最大幅が親要素以内(以下では画面幅)に収まります。

画像がはみ出しておらず、木の小屋がすべて表示されています。
marginで左右に余白を指定する場合、その余白分を引いた数字を指定する必要があります。例えば、margin-leftとmargin-rightで4%を指定する場合、max-widthでは92%と指定します。
  • イイ! 0
  • 泣ける 0
  • ガクガクブルブル 0
  • ホンワカ 0
  • オワタ 0
  • キンモー 0
  • カワイソス 0
  • ブッ!! 3
  • イクナイ! 0
  • イラネ(削除希望) 削希

最近のコピペ評価状況

ブッ!! ブッ!! ブッ!!

コメント一覧

1  名前::2021/03/01(月) 23:28:31  ID:Ho/KcOdt スマートフォンからの投稿
これはw 

素人が騙されてパソコンオシャカにするパターンw
0Spacer イイ!コメント
2  名前::2021/03/01(月) 23:38:16  ID:qNBFG33w スマートフォンからの投稿
CSS程度でつまづくようなおサルはPC触らない方がよろしいかと
0Spacer イイ!コメント
3  名前::2021/03/05(金) 21:24:43  ID:C8DkxIwX スマートフォンからの投稿
画像のスポンジボブ対応
0Spacer イイ!コメント
 

コメントを投稿する

名前:

コメントルール

URL

よろしければ、ブログ・mixi等からリンク等を貼る時などにでも利用してください。