How to display banner images which look good on both desktop and mobile view

Question

I have a progressive web app developed in reactjs and in this I am using banner images which look good on mobile view, but when I switch to laptop view the banner images look big.

I tried to set the height property, but the image looks squeezed on laptop view. The CSS code for the same is pasted below

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

  }
}

What is the best way to display banner images which look good on both laptop and mobile view

Answer 1

You can easily manage your banner image with this css property:

object-fit: contain

Or you can look into different values of object-fit in this doc:

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