响应式图像锚定在其容器div的顶部

Question

我正在为移动设备开发一个网页，我需要在其中预览一些图片。面临的问题是当我改变（减小）窗口的宽度时（显然图像调整大小并且其高度减小以保持纵横比）图像粘贴在div的顶部，其中图像控制是已放置.css属性vertical-align:middle;不适用于此div。也尝试使用line-height属性也无效。我需要将图像垂直对齐

我的标记是

<div id="dvImgPreview" class="imagePreview" style="display:block;" runat="server">                       
      <asp:Image ID="ImgIPreview" runat="server" ImageUrl="" />
</div>

和用于此的css是

.imagePreview{text-align:center;vertical-align:middle; margin:10px 10px 5px 10px;height:410px;background-color:#000;}
.imagePreview img{max-width:100%;}

div的高度需要固定为410px

Answer 1

由于你定义了一个高度，你可以使用

.imagePreview img{
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

不要忘记在position:relative;

上声明.imagePreview

Fiddle

Answer 2

尝试填充样式而不是vertical-align为＆＃34;填充：50％0;＆＃34;