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

Question

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

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

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

当您将浏览器窗口缩小到足以使黑色菜单缩减为 2 或 3 行文本，然后水平扩展窗口使其恢复为一行(但保持窗口足够短)时，问题似乎会出现以便您可以垂直滚动)。然后向下滚动 width:auto在 .logo img 上似乎没有开始，图像会拉伸(stretch)。

以下是问题的一些截图:

最后，父框本身的 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 的一些其他尺寸以满足您的目标。