无论图像的原始尺寸如何，如何以响应方式将图像与其容器（卡）成比例地适合？

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上无法使用，请参见here。

它看起来像这样：

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