如何显示在桌面和移动视图上看起来都不错的横幅图像

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