【发布时间】：2013-11-01 21:18:25
【问题描述】：
我想垂直对齐两个图像（高度不同但宽度相同）并使它们都适合屏幕。 我可以将它们放在不同的 div 中。 居中与否。没关系。 （它们必须适合屏幕）
我已经在这里阅读了一些关于这个问题的帖子，但没有成功。
我会用 css 解决这个问题，但我也可以使用 javascript 或 jquery。
任何帮助将不胜感激。
示例图（绘图图和蓝带底部）：
这里是代码：
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
background-image: url("http://frisketti.altervista.org/img/sfondo.jpg");
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
footer {
display: block;
min-height: 100px;
background: #ffeebb;
background-image: url("http://frisketti.altervista.org/img/footer.jpg");
}
</style>
</head>
<body>
<div id='main'>
<article></article>
</div>
<footer></footer>
</body>
</html>
【问题讨论】：
-
上方的图片令人不安。
-
@now 我不能：A- 获取适合屏幕的图像 B- 此代码在 Safari 上无法正常工作。