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

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。