-2

I creating a website banner using HTML, CSS and slick. In desktop it looks good, but in mobile devices it looks small, when I tried to increase the height of the image, the image got stretched and some part of the images got cut. how to solve this

 <section class="bannerarea">
        <div class="topbanner">
          <div><img src="/assets/img/banner/ayurvedhaproducts.jpg" /></div>
          <div><img src="/assets/img/banner/chlorophyl.jpg" /></div>
          <div><img src="/assets/img/banner/agroproducts.jpg" /></div>
        </div>
      </section>

.topbanner .cubeanimation {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.topbanner .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.topbanner .slick-active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-animation: cssAnimation 8s 1 ease-in-out forwards;
  animation: cssAnimation 8s 1 ease-in-out forwards;
}
Gastón Schabas
  • 2,153
  • 1
  • 10
  • 17
g mareeswaran
  • 1

1 Answers1

-1

To make your code responsive I'd use div elements with a background image instead of actual img tags.

<section class="bannerarea">
    <div class="topbanner">
        <div class="banner-image" style="background-image: url('/assets/img/banner/ayurvedhaproducts.jpg')"></div>
        <div class="banner-image" style="background-image: url('/assets/img/banner/chlorophyl.jpg')"></div>
        <div class="banner-image" style="background-image: url('/assets/img/banner/agroproducts.jpg')"></div>
    </div>
</section>

.banner-image {
    background-size: cover; /* This ensures the image covers the div without stretching */
    background-position: center; /* This will center the image inside the div */
    height: 300px; /* Initial height for desktop. Adjust this as per your need */
    width: 100%; /* To ensure the div takes full width */
}

/* Responsive CSS for mobile devices */
@media (max-width: 768px) {
    .banner-image {
        height: 150px; /* Adjust this height for mobile screens */
    }
}
MaikeruDev
  • 1,075
  • 1
  • 19