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

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

1 个答案: