Border radius not working for img tag with width property

47 Views Asked by At

I need to make round corners for image in div. Image shoul contain this div. Here is my realisation of that:

.img-module {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 70vh;
  grid-column: 1/2;
  grid-row: 1/2;
  border-radius: 1.5rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
  border-radius: 1.5rem;
}
<div className='img-module'>
   <img src="http://placekitten.com/200/300" alt="" />
</div>

Every thing is fine without width property, but without width wide images will not fit to the div and go outside it. With stated width wide images fit the div normally but border-radius become disabled somewhy and images's corners become stamdart. Could comebody tell me how can i fix it?

High pic with width on: Picture link

High pic with width off: Picture link

Wide pic with width on: Picture link

Wide pic with width off: Picture link

I tried to google it but unsuccessfully...

0

There are 0 best solutions below