如何制作 div 大小以匹配 div 内容（以创建阴影效果）？

Question

我有这个html

<div class="picture-image">
  <img src="/path/to/img.jpg" alt="" class="img-fluid">
</div>

和这个css

.picture-image {
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.picture-image>img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.img-fluid {
    max-width: 100%;
}

通过这种方式，包含的 div 与屏幕尺寸（大约）相匹配，图像与高度或宽度相匹配（取决于方向）并且可以在不拉伸的情况下调整大小。

现在我想对图像应用阴影效果，所以我想我需要一个 div，但是我怎样才能使 div 匹配图像大小和更改浏览器大小时也调整大小？

Answer 1

您可以在 img 上使用 filter: drop-shadow() 在 image-data 本身上创建阴影（而不是围绕 img的边界框）：

/* QuickReset */ * { margin: 0; box-sizing: border-box; }  /* Add this on top */

.picture-image {
  height: 100vh;
  /* overflow: hidden;   /* REMOVE THIS */
  position: relative;
}

.picture-image>img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3)); /* Add this */
  padding: 20px; /* and this to add some spacing */
}

.img-fluid {
  max-width: 100%;
}

<div class="picture-image">
  <img src="https://d5nunyagcicgy.cloudfront.net/external_assets/hero_examples/hair_beach_v391182663/original.jpeg" alt="" class="img-fluid">
</div>

如何制作 div 大小以匹配 div 内容（以创建阴影效果）？

How to make a div size to match the div content (to create a shadow effect)?

html

css

sass