css - 在 ems 中可靠地调整图像大小？

Question

我有 2 个图像实例，其中的文本需要调整为与相关文本相同的大小，这些文本已在 em 中设置。一个是导航菜单中的标识，作为前景图像，一个是独特的标题，已经用老式的背景图像和负文本缩进方式替换了字体。

至少在 Firefox 和 Chrome 中，为高度设置适当的 em 大小会给出正确的行为。我没有设置宽度以避免透视问题。

然而，在 Safari 中，直到 5.1.7，图像显示太大。对于此处解决方案的步骤有何建议或想法？我还没有测试 IE，但我正在为 7、8 和 9 提供特定的样式。

我更喜欢在用户仅缩放文本时调整大小。最终目标是使图像的大小调整量与文本的调整量完全相同，因为图像文本 sixe 与真实文本匹配。

HTML5:

ul id="one" class="nav">
    <!--Logotype-->
    <li class="logo"> <a href="/">
      <h1><img src="http://bitly.com/YV6G0S"></h1>
      </a></li>
    <!-- endLogotype -->
    <li><a href="#">Text Link 2</a></li>
    <li><a href="#">Text Link 3</a></li>
  </ul>

CSS:

body {
    font: 81.25% Arial;
}
.nav {
    list-style: none;
    height: 100%;
}
.nav li {
    float: left;
    font-size: 2em;
}
.nav li a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.5em 0.4em;
}
.nav li a h1 {
    display: inline-block;
    font-size: 1em;
    font-weight: normal;
}
.logo img {
    height: 1em;
}

JsFiddle

我已经用 jsfiddle-example 的缩短版本用重新编写的代码更新了示例. (腾出一些水平空间来查看结果)以更好地说明我希望图形如何表现的目标。在 fiddle 中，图形只是文本的屏幕转储，剪切为 26 像素高度并设置为 2em 的高度。根 em 通常为 13px。

在示例中，您可以看到图形实际上正在 Firefox 中调整大小，这是有希望的。然而，图像不是文本，因此必须进行一些调整以使图形位于同一位置并且表现得像同级文本链接。

在现实世界中，图形的大小和外观都不相同，需要一些偏移才能与文本对齐。但是当调整页面大小时，图形会像文本一样调整大小。

Answer 1

您可以使用这段代码调整图像大小:

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

...或者如果您想要图像的最大尺寸，将其放入容器中，如下所示(保留上面的 img 声明):

.container {
    max-width: 300px;
}
<div class="container">
    <img src="logo_115x39.png">
</div>

这可以轻松修改，使您的容器的最大宽度等于所需的高度(以 em 为单位)。

更新:
如果我正确理解你的问题，你可以通过计算图像的纵横比来设置你的图片最大宽度，而不是高度。下面的计算是用你在问题中提到的 5.46em 进行的。请参阅 JSFiddle 演示并缩小窗口以查看图片缩小。

.logo div {
    /* 
    115px / 39px = 2.948717948717949
    2.948717948717949 x 5.46em = 16.1em
    */
    max-width: 16.1em;
}
.logo img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 hack */
}

JSFiddle
http://jsfiddle.net/mKt3c/