html - 显示 : table and max attributes

Question

我正在使用 Bootstrap 轮播。在这里面，我放了图片(宽度和高度未知)。轮播的宽度也是未知的，因为页面是响应式的。高度已知，大屏幕为 500px，小屏幕为 300px。

我想在旋转木马中水平和垂直居中图像，为此，我正在使用:

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;
}

当 img 尺寸小于宽度和高度时，此方法工作正常。但是当img的heigth大于500px或者img的宽度大于轮播的宽度时，img就会溢出轮播。而且我想调整图像大小以完全进入轮播，在大屏幕和小屏幕上。

我尝试将 max-width: 100% 放入容器中，但由于 display: table 属性而不起作用。我需要 display: table 属性来垂直对齐，因为我尝试了其他选项但都有效。

如何指定 100% 轮播图片的最大宽度和最大高度？谢谢!

Answer 1

这是plunker吗？解决问题了吗？

以下是更改摘要:

img 
{
width: 100%;
}

.item 
{
height: 500px;
background: blue; /*added a color only to see the height*/
}

由于 vertical-align 已经在您的 .containerIn div 中，因此您不需要再将其应用于图像。