Html 如何在背景大小为contain的元素上使用框阴影？

我有一个固定大小的div，里面有一个背景图像，我使用background size:contain来调整图像的大小以适应它。我遇到的问题是如何获得与调整大小的图像对齐的阴影，而不是整个div

e、 g

---

根据规范，不能将框阴影应用于div。尝试的解决方法包括在div内放置绝对位置的img元素（相对位置），将img设置为最大宽度100%，并将框阴影放置在img标记上

令人敬畏的不带表情的JS小提琴连接，模仿您正在尝试做的事情：

---

添加了边框，以便您可以看到分区的轮廓。

将

img

添加到

div

中，然后对其应用阴影

HTML:

---

工作。

不模拟背景大小：包含背景位置：中心；这太完美了！谢谢

    #picture-container {
        width: 200px;
        height: 200px;
        background: url('image.png') no-repeat center;
        background-size: contain;
        box-shadow: 0px 0px 10px #000000;
    }

<div id="div2">
    <span><span><img src="http://placekitten.com/400/200"></span></span>
</div>

<div id="picture-container">
    <img id="image" src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2013/09/Samsung-Galaxy-Gear-6-colors-side-640x361.jpg">
</div>

#picture-container {
        width: 200px;
        height: 200px;
        background-color: red; 
    }
#image
{
    max-width: 100%;
    box-shadow: 0px 0px 10px #000000;
}