モバイルサイトでの画像のサイズを調整するには？

レスポンシブル・デザインなので、テーマに寄って思わぬことになっちゃいますね。

思い浮かんだことを幾つか提案させていただきます。

1. まゆみとまゆかのアイコンを、360px で用意してスマホサイズになった時に大きくなっても不自然じゃないようにする。
2. 対話をリストで作る
3. アイコンをスタイルシートで処理する

要はメディアの挿入で入れているので画像として判断されて大きくなるのだと思います。

ソースを観ていて思ったのですが、
質問とは離れますが、<wbr />を多用されているのはどういった意図があってのことでしょう。

nobita さん
【否定擬似クラス】勉強になりました、ありがとうございます。
対話形式が必ず交互に行われるのを前提にして、
奇数、偶数行で処理を変えることぐらいまでしか思いつきませんでした。