How to hide borders when resizing images?-CodePudding

I put three photos inside a container but since I want there to be space between them, I couldn't leave the original size because they would take up the whole container without leaving the space I want. To make them smaller I modified the height to 80%. It worked but since I need to add the shadow to the box, I need it to match the edges of the image. As you can see from the purple, the box is larger than the actual image. I would like to know how to get a box as big as the actual image, so without the purple section.

I added the background color only to the first pic, but the problem can be extended for all the three pics.

I post the code below.

.background {
  height: 100vh;
  display: flex;
  justify-content: space-between;
}

.background * {
  width: 100%;
  height: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Thanks all! ;)

CodePudding user response：

You can take a look at object-fit property: https://www.w3schools.com/css/css3_object-fit.asp

Also, you should put:

.background > * {
  flex: 1/3;
}

So that the boxes are taking the same space.

CodePudding user response：

you should add this to each div that contains an image (if they have the same class) The div would then be positoinned relatively to the image and you could then edit the box-shadow with the box-shadow property

.col{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    margin-right:3.33%;
    box-shadow: 10px 10px 10px 10px  red;
}

CodePudding user response：

Not sure why you're having the images as background images, but I would just use object-fit. Do note, I replaced the divs with image tags.

.background {
  height: 100vh;
  display: flex;
  justify-content: space-between;
}

.background img {
  width: 100%;
  height: 80%;
  padding: 1rem;
  box-sizing: border-box;
  object-fit: contain;
}

<div >
  <img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
  <img src="https://picsum.photos/50/150"  alt="50x150"  title="50x150"/>
  <img src="https://picsum.photos/30/150"  alt="30x150"  title="30x150"/>
</div>