html - 如何在具有 background-size:contain 的元素上使用 box-shadow？

Question

我有一个固定大小的 div，里面有一个背景图像，我使用 background-size: contains 来调整图像的大小以适应它的内部。我遇到麻烦的地方是试图了解如何获得与调整后的图像对齐的阴影，而不是与整个 div 对齐。

例如

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

Answer 1

添加img到div然后对其应用阴影。

HTML：

<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>

CSS：

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

工作小提琴。

Answer 2

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

附加了非常无语义的 JS 小提琴，模仿了你正在尝试做的事情：

http://jsfiddle.net/VbFfL/1/

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

添加了边框，因此您可以看到 div 的轮廓。

Answer 3

我们可以在图像周围添加一个额外的 div 类 say .picture-container。通过添加display: flex它，我们可以使用 justify-content 和 align-items 轻松地将图像居中。然后，我们可以添加max-height: 100%; max-width: 100%到图像中。这将使图像表现得像background-size: contain，阴影将正确地跟随图像。这是一个示例解决方案 -

.picture-container {
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picture-container img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0px 0px 10px #000000;
}

<div class="picture-container">
  <img src="https://via.placeholder.com/500x200">
</div>

<div class="picture-container">
  <img src="https://via.placeholder.com/500x1000">
</div>

<div class="picture-container">
  <img src="https://via.placeholder.com/100x100">
</div>