Question

我正在使用自助式旋转木马。在此内部，我放置了图像（未知宽度和高度）。轮播的宽度也是未知的，因为页面是响应的。知道高，大屏幕为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％旋转木马图像的最大宽度和最大高度？谢谢！

Answer 1

这plunker是否解决了这个问题？

以下是更改摘要：

img 
{
width: 100%;
}

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

由于vertical-align div上已有.containerIn，因此您无需将其应用于图片。

显示：表和最大属性

1 个答案: