如何顯示在桌面和移動視圖上看起來都不錯的橫幅圖像

Question

我有一個在 reactjs 中開發的漸進式 web 應用程序，在此我使用的橫幅圖像在移動視圖中看起來不錯，但是當我切換到筆記本電腦視圖時，橫幅圖像看起來很大。

我試圖設置高度屬性，但圖像在筆記本電腦視圖中看起來被擠壓了。 下面粘貼了 CSS 代碼

banner-container {
    padding: 20px;
    margin-top: 45px;

    .banner-img {
      max-width: 100%;
      height: auto;
    }

 }

@media (min-width: 767px) {
 .banner-container {
    padding: 20px;
    margin-top: 200px !important;
    max-width: 100%;

    .banner-img {
      width: 100%;
      height: auto;
      max-height: 300px;
    }

  }
}

顯示在筆記本電腦和移動設備視圖上看起來都不錯的橫幅圖像的最佳方式是什么

Answer 1

您可以使用此 css 屬性輕松管理您的橫幅圖片：

object-fit: contain

或者您可以在本文檔中查看不同的 object-fit 值：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit