背景图片宽度

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属性中设置什么，它都不起作用。位于框架后面的头像始终具有其原始尺寸。

- Cyclone

---

尝试一下，看看它是否有效：width: 100px !important; - rs.

@rs 我已经尝试过了 - 没有起作用。 - Cyclone

Answer 1

如果将一张图片设置为容器的背景，就无法调整它的大小。唯一的方法是使用img标签，并使用width和height CSS属性调整其大小。

在这里查看这里，可能会有所帮助。

- Leandro Galluppi

---

实际上，对于支持CSS3的浏览器，你是可以这样做的。 - dgvid

Answer 2

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

- RoToRa

Answer 3

你可以使用CSS3的background-size属性，对于支持该属性的浏览器，然后针对旧版浏览器采用折中方案。这个折中方案可以是设置背景颜色填充背景图像周围的空间，或者使用background-repeat属性来“平铺”图像。

例如：

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

- dgvid

---

有没有一种在 img 标签中实现最佳兼容性的方法？ - Cyclone

我想你可以使用两个img标签。其中一个是背景，它的src为images/avatars/128.jpg，另一个是前景，它的src为/imgs/frame.png。然后，您将使用绝对定位将这两个img标签放置在相对于#user-avatar的正确位置，然后将前景img的z-index设置为背景img的z-index更高。 - dgvid