html - div背景小于css的内容（不以%或px指定宽度）

Question

这就是我所拥有的：

<div style="width: 100%; background: red; text-align: center">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;">
</div>

这就是我要的：

我在 CSS 中尝试了边框、嵌入阴影和许多其他选项，但它们似乎都不适用于我的目的。

有什么方法可以使 div 的背景小于内容而不必指定其高度？

Answer 1

添加另一个 div 就可以了；

<div style="width: 100%; text-align: center">
  <div style="width:100%;height:100px;position:absolute;left:0;top:45px;background:red;z-index:-1;"></div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Plain-M%26Ms-Pile.jpg/280px-Plain-M%26Ms-Pile.jpg" height="170" width="170" style="border-radius:700px; border: 10px solid white;">
</div>

Answer 2

像这样的东西（小提琴）？

div {
    margin: 40px 0;
}

img {
    margin: -40px 0;
}

Answer 3

我知道这很旧，但您可以使用背景大小和位置（如果需要）。

background-size: 50% 50%; /* background half the size of the div */
background-position: 50% 50%; /* to center it */