I have a div with overflow:hidden that contains an image. On this image, there's a 1 pixel gap that's non existent on the original image, and it is still there on any other image I try. I've tried setting padding: none, and checking if that's cancelled by any inheritance, but there's nothing. I think it has to do with the border, but I'm not sure.

Sorry for the low res, but I had to zoom in. Here the code is:

.product-container{
  width: 225px;
  height: min-content;
  overflow: hidden;
  border-radius: 10px;
  border: 1px #dddddd solid;
  margin: 5px;
  padding: 0px;
}
.product-image{
  width: 225px;
  height: 200px;
  object-fit: cover;
  display:block;
}

<div class="product-container" >
       <img class="product-image" src="https://images.pexels.com/photos/931177/pexels-photo-931177.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you zoom in, you can see the 1px gap, at least on my display. I have a DPI of 100.

CodePudding user response：

try make =>

width:100%; height:100%; for img

CodePudding user response：

you could try taking the border-radius off the img container and place the border-radius in the product-image class