如何使用“em”单位显示图像？答案

【问题标题】：How can I display an image using the "em" unit?如何使用“em”单位显示图像？
【发布时间】：2010-11-18 13:12:15
【问题描述】：

我用width:10em 和height:5em 创建了一个<div>。
现在我想在这个<div> 中显示一个大小完全相同的<img>（GIF 图像）。但显然它并不“知道”em 单位。它以 10x5 像素显示图片。

如何使用“em”单位显示<img>？

【问题讨论】：

你使用了什么标记？您是否尝试使用 CSS 调整其大小，还是仅使用宽度和高度属性（仅采用像素尺寸）
你用哪个浏览器测试过？

【解决方案1】：

使用此代码：

<html>
  <body>
    <p>This is 10em x 5em</p>
    <div style="width:10em; height:5em;">
    <img style="width:10em; height:5em;" src="logo.png" />
    </div>
  </body>
</html>

它适用于 Windows XP 上的 Firefox 3.5、Internet Explorer 8 和 Opera 10.0 Beta。

【讨论】：

重复完全相同的宽度/高度值没有意义。您也可以 a) 取消封闭的 div 或 b) 将图像的值更改为 100%。

【解决方案2】：

您可以使用 CSS 设置 img 样式：

img.MyImage {
    width: 10em;
    height: 5em;
}

<img class="MyImage" src="image.gif" />

【讨论】：