例如，如果我将浏览器 window 的大小调整 10 像素，我该如何将 header 上的徽标调整 1 像素？

Question

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

我该怎么做？

<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: auto; /* 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)
  });
});

例如，如果我将浏览器 window 的大小调整 10 像素，我该如何将 header 上的徽标调整 1 像素？

If I resize the browser window by 10 px how do i resize the logo on the header by 1 pixel for example?

css

responsive-design

image-resizing