使用 jquery 调整 div 大小会导致子图像丢失纵横比

Question

我有一些代码可以调整包含我的徽标的 div 的大小以匹配单独的<ul> 的当前高度。在 CSS 中，标志<img> 具有以下属性：

.logo img {
    height:100%;
    width:auto;
}

这意味着图像将与包含它的 div 一样高，并且自动高度应该保持纵横比，但是在某些情况下，图像在调整大小时会被拉伸。我当前代码的基本版本可以在这里找到：http://flatpackstudios.com/2014%20Site/index.html

当您将浏览器窗口设置得足够小以使黑色菜单包含 2 或 3 行文本，然后水平展开窗口使其恢复为一行（但保持窗口足够短）时，问题似乎出现了以便您可以垂直滚动）。然后，当您向下滚动 .logo img 上的 width:auto 时，似乎没有启动，并且图像会拉伸。

这是问题的一些截图：

最后，父框本身的 CSS 和 Jquery：

CSS：

.logo {
    position:fixed;
    top:17px;
    left:20px;
    z-index:100;
    text-align:right;   
}

JQuery:

$(document).scroll(function(){
            if($(this).scrollTop() > stickerTop && $(window).width() > 480) {
                $("#sticker").css({position:'fixed',top:'0px'});
                $(".logo").css({top:'3px', zIndex:'1000', width:'122px', height: stickerHeight - 6, cursor:'pointer'});
                $('#page').css('padding-top',stickerHeight + 20);
            }

            else {
                $("#sticker").css({position:'relative'});
                $(".logo").css({width: 'auto', zIndex:'auto', height: 'auto', top: '17px', cursor:'default'});
                $('#page').css('padding-top','20px');
            }
        });

Answer 1

不妨试试：

.logo img {
   max-height: 100%;
   max-width: 100%;
}

以及 div.logo 的其他一些维度以适合您的目标。