背景图像宽度答案

【问题标题】：Background image width背景图像宽度
【发布时间】：2011-12-06 14:07:09
【问题描述】：

这是我的 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 属性中设置的任何内容都不起作用。框架后面的化身每次都有他的原始尺寸。

【问题讨论】：

试试这个，看看它是否有效 width: 100px !important;
@rs 我已经试过了 - 没用。

标签： css image dimensions

【解决方案1】：

您无法调整设置为容器背景的图像的大小。调整图像大小的唯一方法是使用 img 标签并使用宽度和高度 css 属性调整它的大小。

看看here可能会有帮助。

【讨论】：

其实用支持CSS3的浏览器是可以的。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

例如：

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

【讨论】：

那么，有没有办法在img 标签中实现最佳兼容性？
我想你可以使用两个 img 标签。一个，背景，将有 src images/avatars/128.jpg，另一个，前景，有 src /imgs/frame.png。然后，您将使用绝对定位将两个 img 标签放置在相对于#user-avatar 的正确位置，然后将前景 img 的 z-index 设置为高于背景 img 的 z-index。