レスポンシブ対応のサイトで、画像はどういった方法でレスポンシブ対応させておりますでしょうか？
jsを使ったり、幾つか方法があるようなのですが、どの方法がIE8対応を考慮すると好ましいですか？
お詳しい方どうぞよろしくお願い致しますm(_ _)m
display: block;width: 100%;height: auto;だよ
便乗で質問です、img要素はdisplay:block;しなくてもwidthなど効いたりしますけどブロック要素にしたほうが良いんですかね？
この方法だと大きい一枚の画像を使い回すことになるのですよね？
モバイルだと読み込みがしんどかったりしますか？
mobileのほうが大きい画像必要にならん？Retinaみたいなアレ
img { max-width: 100%; height: auto; width /***/:auto;}ですかね複数の画像を用意して対応（imgset等）はしておりません。
max-width:100%で良い。サイズ的には最近Retinaでジャストサイズだとむしろボヤけるので、デカくて問題ない。あとそもそもIE8を搭載したモバイル端末が存在しないので、考慮する必要はない。
みなさま、ご回答ありがとうございます。
現状、1枚の画像をPCでもモバイルでも使い回すというのが一般的ということなのでしょうか？
横レスだけど基本的にはそうで、俺はそうしてる。高精細ディスプレイ用に画像を出し分けるのは運用人員が確保できるならやるけどそうでない場合が多く、往々にして面倒くさい。
それが一般的だったのは10/13までの話で、今は違う。Chromeが10/14からPicture要素に対応したから、それを使うのがベスト。Picture要素には最初から後方互換性がある。
>>ID:lg2DuK0akaMO画像の出し分けるんだったらこれからはソレがベストだけど、それ様のコストを払えますかって事。まぁ時と場合だとおもうよ～。
みんなの回答 4 件
display: block;
width: 100%;
height: auto;
だよ
img {
max-width: 100%;
height: auto;
width /***/:auto;
}
ですかね
複数の画像を用意して対応（imgset等）はしておりません。
max-width:100%で良い。サイズ的には最近Retinaでジャストサイズだとむしろボヤけるので、デカくて問題ない。あとそもそもIE8を搭載したモバイル端末が存在しないので、考慮する必要はない。
みなさま、ご回答ありがとうございます。
現状、1枚の画像をPCでもモバイルでも使い回すというのが
一般的ということなのでしょうか？
関連するトピックス