1

I have 2 instances of images with text that need to resize to the same amount as related text, which have been set in ems. One is a logotype in a navigational menu, as a foreground image and one is a unique headline that have been font-replaced in the old-fashioned way of a background image and negative text-indent.

In Firefox and Chrome at least, setting the proper em size for the height gives the correct behavior. I'm not setting the width to avoid perspective issues.

In Safari, as late as 5.1.7, however, the image is shown too big. Any suggestions or thoughts for steps towards a solution here? I haven't tested IE yet, but I am supplying specific styles for 7, 8 and 9.

I'd prefer resizing working also when user is zooming text only. The end objective is to have the image resize in the exact same amount as the text does, as the image text sixe matches the real text.

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

I've updated the example with reworked code with a shortened version of the jsfiddle-example. (Make some horizontal room to view the result) to better illustrate the objective how I want the graphic to behave. In the fiddle the graphic is just a screen dump of the text cut to 26 pixels height and set to the height of 2em. The root em is then typically 13px.

In the example you can see that the graphic actually is resizing in Firefox, which is hopeful. However an image isn't text so some adjustments have to be made to make the graphic sit at the same spot and behave like the sibling text links.

In the real world the graphic isn't the same size and look and would need some offsets to sit right with the text. But when resizing the page the graphic would resize like the text.

4

1 回答 1

0

您可以使用以下代码调整图像大小：

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/

于 2012-11-06T18:27:43.430 回答