Carousel Browser Window

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?

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

try along the lines of

.item img, .item active img{


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 {
.carousel-inner {

.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img {

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

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…

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

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

Yes, later, when needed.

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…

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.