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

I have this html

<div >
  <img src="/path/to/img.jpg" alt="" >
</div>

and this 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%;
}

in this way the containing div matches the screen size (approximately) and the image matches the height or the width (depending on the orientation) and can resize without stretching.

Now I would like to apply a shadow effect to the image so I was thnking that I need a div for that, but how can I make that div to match the image size and also resize when changing the browser size?

CodePudding user response：

You could use filter: drop-shadow() on the img to create a shadow on the image-data itself (instead of around the img's bounding box):

/* 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 >
  <img src="https://d5nunyagcicgy.cloudfront.net/external_assets/hero_examples/hair_beach_v391182663/original.jpeg" alt="" >
</div>