Search code examples
cssangularionic-frameworksassionic4

How can i fit images in to div ( Ionic )

I have a div container and inside of div i have a img.

  <div  style="background-color: red; height: 200px; width: 200px;">
    <ion-img  src="{{kategori[i].img}}"></ion-img>

    </div>

I want to fill that div with my image. But its not fit inside. Its looks like that :

https://prnt.sc/12qcj8h

Some of them being small some of them being big. How can i fill inside of div ? I dont want see red background and i want it fill inside of div. Its my css code :

ion-img {

  border-radius: 15px;
  background-size: cover;
  max-width: 100% !important;
  max-height: 100% !important;
}

Thanks for help

Solution 
  • ion-img {
  border-radius: 15px;
  object-fit: cover;
}

    https://www.w3schools.com/css/css3_object-fit.asp