Skip to main content
Roopavathy
Known Participant
November 1, 2018
Answered

Bootsrap Carousel image not responsive

  • November 1, 2018
  • 2 replies
  • 765 views

Hi all,

Here is my link

ANEH - 2019 | Home

The images in the carousel (Home Page) are not responsive.The images were embedded as a background.So I don't know how to make them to be responsive.

Kindly help to make them responsive.

.carousel-item.item4 {

    background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

    background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

    background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

    background: url(../images/ANEH2019-Web-V3.png) no-repeat;

    background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

    background-size: cover;

   

}

Thanks.

    This topic has been closed for replies.
    Correct answer Paul-M

    I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">

    I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....

    e.g.:

    <div class="carousel-inner">
      
    <div class="item active">
      
    <img src="/folder/image1.jpg" class="img-fluid">
      
    </div>
      
    <div class="item">
      
    <img src="/folder/image2.jpg" class="img-fluid">
      
    </div>
      
    <div class="item">
      
    <img src="/folder/image3.jpg" class="img-fluid">
      
    </div>
      
    </div>

    Also you still have some messed up comment tags in that page ..

    2 replies

    Legend
    November 1, 2018

    Could also try:

    background-size:  cover;
    background-repeat:  no-repeat;
    background-position: center center;

    Paul-M - Community Expert
    Legend
    November 1, 2018

    try adding

    background-size: contain;

    so:

    .carousel-item.item4 {

        background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

        background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

        background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

        background: url(../images/ANEH2019-Web-V3.png) no-repeat;

        background:  url(../images/ANEH2019-Web-V3.png) no-repeat;

        background-size: contain;

       

    }

    Paul-M - Community Expert
    Roopavathy
    Known Participant
    November 1, 2018

    Yes... I did ...and its responsive .....but it gets left aligned in desktop view.And there is gap at the right side....

    Paul-MCorrect answer
    Legend
    November 1, 2018

    I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">

    I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....

    e.g.:

    <div class="carousel-inner">
      
    <div class="item active">
      
    <img src="/folder/image1.jpg" class="img-fluid">
      
    </div>
      
    <div class="item">
      
    <img src="/folder/image2.jpg" class="img-fluid">
      
    </div>
      
    <div class="item">
      
    <img src="/folder/image3.jpg" class="img-fluid">
      
    </div>
      
    </div>

    Also you still have some messed up comment tags in that page ..

    Paul-M - Community Expert