在页面上垂直居中图像并在调整大小时保持纵横比

Question

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

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; right: 0;
}

.text {
    margin-top: -50px;
    text-align: center;     
}

// Solution 2 - same as above but with .wrap class

.wrap {
    overflow: hidden;
    position: relative;
    padding-top: 65%;
}

任何帮助将不胜感激.

Answer 1

如果图像足够大,您可以使用max-width而max-height不是width和height.这将根据需要减小图像的大小,从而保持纵横比.

img {
    max-width: 70%;
    max-height: 70%;
}

为了使它居中,你可以使用绝对定心技术......

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

html, body, .image, .wrap {
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrap {
  position: relative;
}
img {
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.text {
  margin-top: -50px;
  text-align: center;		
}

<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>

......或类似的固定定心技术.

img {
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
}
.text {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;		
}

<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>

但是,请注意使用max-width并且max-height不会增加图像的大小以填充更大的屏幕.这可能是一件好事,因为它不会变得模糊.

但是如果你想让它填满屏幕,即使图像较小,你也可以使用object-fit: contain:

img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
}
.text {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;		
}

<div class="image">
  <div class="wrap">
    <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
  </div>
</div>
<div class="text">Scroll down</div>

注意IE还不支持object-fit.