相关疑难解决方法(0)

我正在尝试做以下事情......

1. 无论屏幕大小如何,都有一个始终在页面上水平和垂直居中的图像.
2. 保持调整大小的宽高比
3. 有一些文本始终位于视口的底部.

到目前为止,我已经提出了两个半解决方案......

• 解决方案1 ​​ - http://jsfiddle.net/5jphd/ - 这可以工作,但不保持宽高比
• 解决方案2 - http://jsfiddle.net/FAzBq/ - 这不是垂直居中的.

我正在寻找一种结合上述两者的解决方案.如果你不能点击上面的链接,这是我的代码...

HTML

<div class="image">
  <div class="wrap">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
 </div>
</div>
<div class="text">Scroll down</div>

CSS

//Solution 1

html, body {height: 100%}

body {
    position: relative;
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  width: 70%;
  height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; …