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...