响应式设计图像对齐

编辑#2

另一个版本,我认为这是我能想到的最干净的版本
live view
edit view
对于宽屏幕视图,使用css表格并垂直对齐:居中,然后对于窄视口折叠表格。代码是干净的,它完全与图像高度无关。

================

编辑

正如@user2748350正确指出的那样,我在下面的原始建议是,如果图像高度不同,就不要在宽屏幕上垂直对齐。

这里有一个变体,它是使用垂直对齐的改进:中间和内联图像。唯一的要求是设置一个大于最高图像的线高度:
live view
edit view

===============================================
起初的

看看这是否有助于您:
live view
edit view

HTML格式

<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>  

CSS格式

.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}

@media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}  

在页面的首页,您还需要添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以便在移动设备上进行良好的显示。

希望这能有所帮助!

这是快速解决方案

 img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }