显示：表格和最大属性

Question

我正在使用引导程序传送带。在这里面，我放置了图像（宽度和高度不明）。旋转木马的宽度也是未知的，因为该页面是响应式的。 heigth知道，大屏幕是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尺寸小于宽度和高度。但是，当imig超过500px或者img宽度超过传送带宽度时，img会溢出传送带。而且我想调整图像大小的屏幕以完全进入旋转木马。

我尝试在容器中放置max-width：100％，但由于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，你不应该还需要将其应用到图像。