I am using a bootstrap carousel. Inside of this, I put images (with unknown width and heigth). The width of the carousel is also unknown because the page is responsive. The heigth is know, for large screens is 500px and for small screens is 300px.
I want to center the images horizontally and vertically in the carousel, for that, I am using this:
HTML
<div class="item">
<div class="containerOut"><div class="containerIn"><img src...></div></div>
</div>
CSS
.item
{
heigth: 500px; /*for small screens is 300px*/
position: relative;
}
.containerOut
{
display: table;
heigth: 100%;
margin: 0 auto; /*for horizontal align*/
}
.containerIn
{
display: table-cell;
vertical-align: middle;
}
img
{
max-width: 100%;
display: block;
vertical-align: middle;
}
This works fine when the img dimensions are smaller than the width and heigth. But when the heigth img is more than 500px or when the img width is more than the width of the carousel, the img overflows the carousel. And I want to resize the image to completely enter in the carousel, in large and small screens.
I try to put max-width: 100% in the containers, but not works because the display: table attribute. I need the display: table attribute to vertical align, because I try other options but anything works.
What can I do to specify the max-width and max-heigth of 100% of the carousel images? Thanks!
Does this plunker solve the problem?
Here's the summary of changes:
img
{
width: 100%;
}
.item
{
height: 500px;
background: blue; /*added a color only to see the height*/
}
Since vertical-align is already on your .containerIn div, you shouldn't need to also apply it to the images.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments