24

携帯電話と PC/Mac の両方で表示される HTML ページをまとめています。テキストには、インライン画像が含まれることがあります。

<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>

私のフォントのサイズは em または % であるため、低解像度の電話と高解像度の電話の両方で読むことができます。問題は、ボタン (通常は 32 ピクセルの高さの画像) が高解像度の携帯電話では非常に小さく表示されることです。

画像サイズを調整するにはどうすればよいですか? 純粋な CSS が望ましいですが、JS でも問題ありません。

4

2 に答える 2

36

タグでフォントのサイズを設定すると、onを使用して画像の高さをフォントの高さに設定<p>できるはずです。height: 1em;p img

ここに私が何を意味するかを示すjsfiddleがあります：

body {
  font-size: 62.5%;
  /*sets 1em to 10px for convenience*/
}

p {
  font-size: 3em;
}

p img {
  height: 1em;
  width: auto;
}
<p>Hello world! <img src="http://images.wikia.com/dragonvale/images/e/e8/Space_invader.jpg"></p>

フォントのサイズの 2 倍にしたい場合は、画像の高さを 2em に設定します。

于 2013-08-26T02:41:32.850 に答える