Highlighted

Making images in a carousel responsive

Explorer ,
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

65

Likes

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

Making images in a carousel responsive

Explorer ,
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

66

Likes

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
Oct 23, 2019 0
Adobe Community Professional ,
Oct 23, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 23, 2019 1