为什么我的div正在调整大小？

Question

我的页眉被构造为一个表。我最终成功地做到了最后一个li向右浮动，X%向左浮动，同时仍然兼容不同的屏幕大小。然而，我的“个人资料图片”div正在调整大小，结果就像一个压扁的圆圈。如何确保div的宽度和高度始终是40px (如果这是绕过它的正确方式)？

​

​

CSS

#hdr-profile {
    align-items: center;
    border: 1px dotted red;
    display: flex; 
    margin-left: auto;
    white-space: nowrap;
}

#hdr-profile-pic {
    width: 40px;
    height: 40px;
    background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    cursor: pointer;
}

HTML

    <li>
        <div id="hdr-profile">
            <div id="hdr-profile-pic" title="My Profile">
                <div id="hdr-profile-country" title="Liam is in Spain"></div>
            </div>
            <span id="hdr-profile-name" class="select"><a href="#">Liam Macmillan</a></span>
            <i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
        </div>
    </li>

Answer 1

一个简单的方法是在个人资料图片的css中的40px后面添加一个!important

Answer 2

我怀疑这是因为下拉列表的大小。在Nenad Vracar链接的JSFiddle中，图片完全没有问题。不要使用！对强制大小很重要，这是一种糟糕的做法，会导致意外的行为。相反，尝试使用下拉菜单的大小进行实验。我没有你剩下的代码，否则我会去查的。