我想垂直对齐两个图像(高度不同但宽度相同)并使它们都适合屏幕。我可以将它们放在不同的 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>