显示：表格和最大属性答案

【问题标题】：Display: table and max attributes显示：表格和最大属性
【发布时间】：2014-07-12 20:51:03
【问题描述】：

我正在使用引导轮播。在其中，我放置了图像（宽度和高度未知）。轮播的宽度也是未知的，因为页面是响应式的。高度是已知的，大屏为 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大于500px或者img宽度大于轮播宽度时，img溢出轮播。我想调整图像的大小以完全进入轮播，在大屏幕和小屏幕中。

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

plunker 解决问题了吗？

以下是更改摘要：

img 
{
width: 100%;
}

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

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

【讨论】：