Question

我有两个带文本的图像实例，需要调整大小与相关文本相同的数量，这些文本已在ems中设置。一个是导航菜单中的标识，作为前景图像，一个是以背景图像和负文本缩进的老式方式进行字体替换的唯一标题。

至少在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重新编写代码更新了示例。（设置一些水平空间来查看结果）以更好地说明目标我希望图形的行为方式。在小提琴中，图形只是切成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>

这可以轻松进行修改，以便容器的最大宽度等于ems中的所需高度。

<强>更新
如果我正确理解了您的问题，您可以通过计算图像的纵横比来设置图片的最大宽度，而不是高度。下面的计算是使用您在问题中提到的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/

可靠地调整ems中的图像大小？

1 个答案: