在页面上垂直居中图像，并在调整大小时保持宽高比 [英] Vertically center image on page and maintain aspect ratio on resize

问题描述

我想尝试以下操作...

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>向下滚动< / div> 
  

CSS

  //解决方案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; 
} 
 
 //解决方案2  - 与上面相同，但使用.wrap类
 
 .wrap {
 overflow：hidden; 
 position：relative; 
 padding-top：65％; 
} 
  

任何帮助将非常感激。

解决方案

如果图片足够大，可以使用 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>向下滚动< / div>  p> 
 
 
 ...或类似的固定中心化技术。
 
 
 
 
 
 
  img {max-width：70％; max-height：70％; margin：auto;位置：固定; top：0; left：0; bottom：0; right：0;}。text {position：fixed; bottom：0;宽度：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>向下滚动< / div>  p> 
 
 
但是，请注意，使用 max-width 和 max-height 不会增加图像的大小来填充更大的屏幕。这可能是一件好事，因为它不会变得模糊。
 
 
 
但是如果你想要它填充屏幕，即使图像较小，你可以使用  object-fit：contains  ：
  img {
 width：70％; 
 height：70％ 
 object-fit：contains; 
} 
  
 
 
 
  img {width：70 ％;身高：70％ object-fit：包含; margin：auto;位置：固定; top：0; left：0; bottom：0; right：0;}。text {position：fixed; bottom：0;宽度：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>向下滚动< / div>  p> 
 
 
注意IE不支持 object-fit 。
 
I am trying to do the following...

Have an image that will always be horizontally and vertically centered on a page, whatever the screen size.
Maintain aspect ratio on resize
Have some text that will always be at the bottom of the viewport.
I have come up with two half solutions so far...


Solution 1 - http://jsfiddle.net/5jphd/ - This works but does not maintain aspect ratio
Solution 2 - http://jsfiddle.net/FAzBq/ - This is not vertically centered. 


I am looking for a solution that combines both the above. Here is my code if you can't click the links above...

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%;
}
Any help would be greatly appreciated.
解决方案
If the image is big enough, you can use max-width and max-height instead of width and height. This will reduce the size of the image as necessary,  maintaining the aspect ratio. 
img {
    max-width: 70%;
    max-height: 70%;
}
To center it, you can use the absolute centering technique...
.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>





... or the similar fixed centering technique.



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>





However, note that using max-width and max-height won't increase the size of the image to fill a bigger screen. This may be a good thing, because it won't become blurred.

But if you want it to fill the screen, even if the image is smaller, you can use 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>





Note IE does not support object-fit yet.

                        
这篇关于在页面上垂直居中图像，并在调整大小时保持宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！