How do I make an image fit proportionally to its container(card) in a way that it is responsive regardless of the image's original size?

Question

What I want to achieve is something like this

The images fit to it's container regardless of its size.

If it is too big, it crops then only shows the middle part.

If it is too small, it stretches until it contains the card but not getting the picture too stretched(still the same proportions as the original)

Here's what I tried

The ion-content of my home page

<ion-content>
  <!-- <h4>Welcome back, {{displayName}}</h4>
  <br> -->
  <h3>Latest News</h3>
  <ion-scroll class="scroll-news" scrollX="true" direction="x">
      <ion-card class="card-news" >
          <img src="https://images.pexels.com/photos/68147/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940https://www.sti.edu/img/banners/tourism.jpg"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
      <ion-card class="card-news" >
          <img src="https://www.sti.edu/img/banners/tourism.jpg"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
  </ion-scroll>

  <h3>Latest Programs added</h3>
  <ion-scroll class="scroll-events" scrollX="true" direction="x">
      <ion-card class="card-events" >
          <img src="https://www.sti.edu/img/banners/tourism.jpg"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
      <ion-card class="card-events" >
          <img src="https://www.sti.edu/img/banners/tourism.jpg"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
  </ion-scroll>
  <h3>Latest Events</h3>
  <ion-scroll class="scroll-news" scrollX="true" direction="x">
      <ion-card class="card-news" >
          <img src="https://loremflickr.com/320/240/cat/all"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
      <ion-card class="card-news" >
          <img src="https://picsum.photos/200/300/?random"/>
          <ion-card-content>
            <p>
              Lorem ipsum dolor amet title
            </p>  
          </ion-card-content>
        </ion-card>
  </ion-scroll>
</ion-content>

The css

.card-news{
    display: inline-block;
    border-radius: 5px;
    width:100% !important;
    height:90% !important;
    max-width: 300px !important;
    max-height: 300px!important;
    margin-left:16px;
    margin-right:0px;

}

.scroll-news{
    white-space: nowrap;
    height: 320px !important;
}

Any tips would be greatly appreciated, thank you! :)

Answer 1

I prefer to use background image and set its background size to cover. this way you can control the height of the images. the downside of using object-fit is it won't work on IE 11 see here.

It will look something like this:

HTML

<ion-card class="card-events">
    <div class="card-img" style="background-image:url('https://www.sti.edu/img/banners/tourism.jpg')"></div>
    <ion-card-content>
      <p>
         Lorem ipsum dolor amet title
      </p>  
    </ion-card-content>
</ion-card>

CSS

.card-img {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   height: 350px;
}