Как сделать так, чтобы изображение подходило пропорционально его контейнеру (карточке) таким образом, чтобы оно отвечало независимо от исходного размера изображения?

Question

То, чего я хочу достичь, это что-то вроде этого

Изображения соответствуют его контейнеру независимо от его размера.

Если он слишком большой, он обрезается, затем отображается только средняя часть.

Если он слишком маленький, он растягивается до тех пор, пока не содержит карточку, но не получает слишком растянутое изображение (по-прежнему в тех же пропорциях, что и оригинал).

Вот что я попробовал

Содержание ионов моей домашней страницы

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

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;
}

Любые советы будут с благодарностью, спасибо!:)

Answer 1

Я предпочитаю использовать фоновое изображение и установить его размер фона для покрытия. Таким образом, вы можете контролировать высоту изображений. Недостатком использования подгонки объекта является то, что он не будет работать в IE 11, см. здесь .

Это будет выглядеть примерно так:

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;
}