• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Making images in a carousel responsive

Participant ,
Oct 23, 2019 Oct 23, 2019

Copy link to clipboard

Copied

Would appreciate some help? Playing with the Boostrap template for a 3 image carousel - all the images are the same size inside a fluid container but when i go to test the site - the container resizes but not the images?

I don't want titles overlaying so deleted that:

<div class="container-fluid">
 <div id="headerimages" class="carousel slide" data-ride="carousel" style="background-color: black">
    <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active"> <img src="images/2019/2019webmasthead.jpg" alt="First slide"> </div>
          <div class="carousel-item"> <img src="images/2019/2019webmastheada.jpg" alt="Second slide">
          </div>
          <div class="carousel-item"> <img src="images/2019/fluidmastheadtemplate.jpg" alt="Third slide"> 
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
    </div>

Views

158

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 23, 2019 Oct 23, 2019

Copy link to clipboard

Copied

LATEST

Add this to your custom stylesheet -- DO NOT edit Bootstrap CSS.

 

.carousel img { width:100%}

 

Keep in mind that this will upscale images on larger screens which could cause distortion.  If you don't want to upscale images, instead use max-width: 100%. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines