例如，如果我将浏览器窗口的大小调整为 10 像素，如何将标题上的徽标大小调整 1 像素

Question

我有一个固定的标题，这个标题在我滚动时会更改高度和图像徽标，但是当我调整窗口大小时，我希望图像保持比例，但是当我缩小浏览器时会变小徽标仅在浏览器的限制接近图像时缩小，但我希望图像在调整浏览器大小时变小。

我该怎么做？

<div id="logo"><a href="#.html"><img width="100%" height="100%" src="images/logo.png" alt=""/></a></div>

我已经试过了

#logo {
    max-width: 100%;
    height: auto;
    width: auto9; /* ie8 */
}

Answer 1

这不能像人们最初想象的那样简单，因为徽标的宽度必须有一个参考点。它当前显示的任何维度都必须与这一点相关，才能使调整大小作为一个整体（并且开始）有意义。也就是说，我在这里将 2560 像素作为最大尺寸 - 低于该尺寸，徽标将比瞬时尺寸和参考点之间的差异小 10%：

http://codepen.io/anon/pen/yNLQKX

$(document).ready(function() {
  $(window).on('load resize', function() {
    var maxsize = 2560;
    var screenwidth = $(this).width();
    var factor = screenwidth-(maxsize-screenwidth)*0.1;
    if (factor > 2560) factor = 2560; // same could be done for minimum size
    $('#logo img').css('width', factor)
  });
});