Carousel Browser Window

[csosa]

Hello, I have a carousel in my Home page of my WEBSITE and when I shrink my browsers width
the image starts to distort and I found out that the width and height attributes in the <img> tag are what
is causing it. The image is the exact size of the width and height attribute. Is it necessary to have those
attributes on an <img> tag? ive seen that it is best to put them…

BTW I have the width:100% on the child div of the carousel should it be put on the parent div?

[pr0c3ss]

The image’s ‘natural’ width is 1920x549. It’s assigned a 1200x550 value.

try along the lines of

.item img, .item active img{
width:100%;
height:auto;
}

[ronpat]

csosa,

To be responsive (fluid), the slider has to be placed in a box with a fixed aspect ratio. Adding padding-top in percent to .carousel creates that box.

Please add the following styles to your local stylesheet so they come after the bootstrap styles:

.carousel {
    padding-top:28.59%;
}
.carousel-inner {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height:auto;
    width:auto;
    overflow:visible;
}

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img {
    height:auto;
}

Understand that the size and height of the text over the slider will not change as the viewport changes

[csosa]

@ronpat

To be responsive (fluid), the slider has to be placed in a box with a fixed aspect ratio. Adding padding-top in percent to .carousel creates that box.

@ronpat

.carousel {
padding-top:28.59%;
}

When I add the padding-top it gives this huge white space in between my nav and the carousel. Its live now but now with that padding…

@ronpat

Understand that the size and height of the text over the slider will not change as the viewport changes

Then I will have to change the text manually using maedia queries correct?

[ronpat]

@csosa

When I add the padding-top it gives this huge white space in between my nav and the carousel. Its live now but now with that padding…

Looks like you added the rest of the code and the huge white space disappeared

@csosa

Then I will have to change the text manually using maedia queries correct?

Yes, later, when needed.

[csosa]

@ronpat

Looks like you added the rest of the code and the huge white space disappeared

But do I need that padding? or is there some padding that is already there that I am not seeing?

@ronpat

Yes, later, when needed.

ok

[ronpat]

@csosa

But do I need that padding? or is there some padding that is already there that I am not seeing?

As I tried to explain…

@ronpat

To be responsive (fluid), the slider has to be placed in a box with a fixed aspect ratio. Adding padding-top in percent to .carousel creates that box.

Yes, that padding is needed to create the container with the fixed aspect ratio. That is why it is in the code that I wrote. Really.

.

What’s next?

The width of the page doesn’t reduce below 1200px ???