Image crops upon resizing the browser

Question

I created a simple slideshow, but upon resizing the browser. Images get cropped. I tried all different ways, but couldn't make it.

Here is a sample of html code:

 <div class="carousel">
        <i class="fas fa-chevron-left" id="prevBtn"></i>
        <i class="fas fa-chevron-right" id="nextBtn"></i>
        <div class="carousel-inner">
            <div class="slide-item">
                <div class="caption">
                    <h1>First Slide</h1>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                </div>
                <img src="https://www.w3schools.com/bootstrap4/ny.jpg" width="100%" alt="">
            </div>
        </div>
           ...
  </div>

here is the css code:

.carousel {
  position: relative;
  width: 992px;
  height: 400px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .carousel-inner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    .slide-item {
      position: relative;
      display: inline-block;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      img {
        width: 992px;
        // height: 400px;
      }
      ... 

@media (max-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 540px;
  }
}
@media (min-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 540px;
  }
}

The slideshow looks fine in bigger screens but as we shrink down the size of browser images get cropped. Here is a codepen. I hope someone can solve it here, Thank you.

Hi, i'm not sure what you expect to happen? Do you want the image centered & cropped or do you want the image to scale smaller? — conordarcy, Mar 09 '20 at 15:58
I want it to scale smaller, but I don't want it to be cropped — Mir Stephen, Mar 09 '20 at 16:00
https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp Please look at this link, there is a bootstrap slideshow that images don't crop upon resizing — Mir Stephen, Mar 09 '20 at 16:04

score 0 · Answer 1 · answered Mar 09 '20 at 15:58

0

Try max-width: 100% in mobile

@media (max-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 100%;
  }

DEMO HERE

answered Mar 09 '20 at 15:58

Luís P. A.

9,524
2
23
36

You can see the demo you provided, as I shrink the size of browser the image is still being cropped. – Mir Stephen Mar 09 '20 at 16:02

Image crops upon resizing the browser

1 Answers1