Bootsrap Carousel image not responsive

Contributor ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

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.

Views

289

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Oct 31, 2018 Oct 31, 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 stil

...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

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

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
community guidelines
Contributor ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

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

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
community guidelines
Adobe Community Professional ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

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

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
community guidelines
Contributor ,
Nov 01, 2018 Nov 01, 2018

Copy link to clipboard

Copied

Thank you very much..It works well now...

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
community guidelines
Adobe Community Professional ,
Nov 01, 2018 Nov 01, 2018

Copy link to clipboard

Copied

LATEST

Good to know

Paul-M, ACP

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
community guidelines
Adobe Community Professional ,
Nov 01, 2018 Nov 01, 2018

Copy link to clipboard

Copied

Could also try:

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

Paul-M, ACP

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
community guidelines