Question

Carousal images are compressed in mobile view

Actually this template is from Bootstrap, don’t know why the images are not response, I have resize those picture to 1280x400px, but the mobile view all photos has been compressed it.

Thanks

{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
        aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="/static/images/Morning need a coffee.png" width="100%" height="100%" role="img" >
        <div class="container">
          <div class="carousel-caption text-start">
            <h1>Free Coffee.</h1>
            <p>Subscribe to get $100 coupon.</p>
            <p><a class="btn btn-lg" style="background-color: #c2773a;" href="https://11151193.sibforms.com/serve/MUIFAAS7sueWkE3-IjWDEfziVy6emgtJgXIhWwReT7sGbykIbLcUnlusmdAZnAm8lW8yEW3jDg6Gn_qerZHMnjaO0XeBuEeS-P9ZNkr_Cp8hXNhL8463OPegZceuA5R9_ahysYv-yejysk69ftND2NCTNE_RxtcW5ZB234aMbolNWs05NjsTLJPL0Z1O5hUnIen3INnwAlzqcj9M" target="_blank">Subscribe</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/static/images/brewing class.png" width="100%" height="100%">
        <div class="container">
          <div class="carousel-caption">
            <h1>Learn how to brew.</h1>
            <p>Want to enjoy a fresh handcraf coffee at home?</p>
            <p><a class="btn btn-lg" style="background-color: #c2773a;" href="#">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="/static/images/Brazil Coffee Bean.jpg" width="100%" height="100%">
        <div class="container">
          <div class="carousel-caption text-end">
            <h1>One more for good measure.</h1>
            <p>Some representative placeholder content for the third slide of this carousel.</p>
            <p><a class="btn btn-lg" style="background-color: #c2773a;" href="#">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

CSS

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 5rem;
  padding-bottom: 3rem;
  color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;

}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys
Site Moderator
Site Moderator badge
June 18, 2023

Heya @massiveseagreenanemone,

The issue might be due to the CSS height property that is being set on .carousel-item. You have set the height to 32rem, which might be too large for smaller screens, leading to images being displayed in a compressed way.

Bootstrap’s carousel component is responsive by default. The img elements within the carousel should automatically adjust their size to fit the width of the carousel. But in your case, the set height for .carousel-item might be constraining the images.

One solution is to set the height of .carousel-item to be different based on the screen size, using media queries. For example:

.carousel-item {
  height: 32rem;
  object-fit: cover;
}

@media (max-width: 767px) {
  .carousel-item {
    height: auto;  /* let the height adjust automatically on small screens */
  }
}

With the above CSS, the height of .carousel-item will be 32rem on screens wider than 767px, and will adjust automatically based on the image aspect ratio on smaller screens.

Another approach is to remove the height property for .carousel-item and let the images automatically adjust their size:

.carousel-item {
  object-fit: cover;
}

Remember, if your images have different aspect ratios, they might look different on different screens, even with responsive styling. It is recommended to use images with the same aspect ratio to make sure the carousel looks consistent across different screen sizes.

Also, consider using Bootstrap’s responsive classes to control the layout on different devices if you want a finer control over the layout. You can check the Bootstrap documentation for more information on how to use these classes.

Bobby Iliev
Site Moderator
Site Moderator badge
June 18, 2023

Hi there,

I believe that you are seeing this behaviour as you’re setting the height and width of your images to 100%. This may not work as expected with responsive design as the aspect ratio of the image will not be maintained when the viewport size changes. This usually can lead to the images appearing squished or stretched on some devices.

Bootstrap has a class for responsive images, .img-fluid, which applies max-width: 100%; and height: auto; to the image so it scales with the parent element. You can try applying this class to your images like this, eg.:

<div class="carousel-item active">
  <img class="img-fluid" src="/static/images/Morning need a coffee.png" role="img">
  <div class="container">
    ...
  </div>
</div>
<div class="carousel-item">
  <img class="img-fluid" src="/static/images/brewing class.png">
  <div class="container">
    ...
  </div>
</div>
<div class="carousel-item">
  <img class="img-fluid" src="/static/images/Brazil Coffee Bean.jpg">
  <div class="container">
    ...
  </div>
</div>

You might also want to remove the specific height value (height: 32rem;) in your .carousel-item class from the CSS:

.carousel-item {
  /* height: 32rem; */
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

I hope this helps! Let me know if you have more questions.

Best,

Bobby

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel