Question

这是我的HTML：

<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>

user-avatar课程如下：

#user-avatar {
     width: 100px;
     height: 100px;
     margin: auto;
     position: relative;
     background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}

框：

#user-avatar img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 122px; 
     height: 127px; 
     margin-top: -62px; 
     margin-left: -63px; 
}

原始user-avatar背景图片尺寸为23x25，但我希望将其尺寸调整为100x100px，问题在于我在width: xxx属性中设置的任何内容都不起作用。框架后面的头像每次都有原始尺寸。

Answer 1

您无法将图像集调整为容器的背景。调整图像大小的唯一方法是使用img标记并使用width和height css属性调整其大小。

看看here可能有帮助。

Answer 2

您可以使用background-size，但只有最新的浏览器支持它：https://developer.mozilla.org/en/CSS/background-size

Answer 3

对于那些支持它的浏览器，您可以使用CSS3 background-size属性，然后再回到旧版浏览器的折衷解决方案。妥协解决方案可以是设置背景颜色以填充背景图像周围的空间，或者使用背景重复属性来“平铺”图像。

例如：

#user_avatar {
    ...
    background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
    background-size: 100px 100px;
}

背景图像宽度

3 个答案: