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

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

424

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

Community Expert , 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

...

Votes

Translate

Translate
Community Expert ,
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 - Community Expert

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
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...

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
Community Expert ,
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 - Community Expert

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

Copy link to clipboard

Copied

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

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
Community Expert ,
Nov 01, 2018 Nov 01, 2018

Copy link to clipboard

Copied

LATEST

Good to know

Paul-M - Community Expert

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
Community Expert ,
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 - Community Expert

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