html - css を使用してそのコンテンツよりも小さい div の背景 (% または 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;
}