在页面上垂直居中图像并在调整大小时保持纵横比 [英] 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="wrap"><img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">

<div class="text">向下滚动</div>

CSS

//方案一html，正文{高度:100%}身体 {位置:相对；填充:0；保证金:0;字体系列:无衬线；}.图片 {位置:相对；左:0px；高度:100%；背景位置:50% 50%；背景尺寸:封面；背景附件:滚动；文本对齐:居中；}图片{宽度:70%；高度:70%；保证金:自动；位置:绝对；顶部:0；左:0；底部:0；右:0；}.文本 {边距顶部:-50px；文本对齐:居中；}//解决方案 2 - 同上，但使用 .wrap 类.裹 {溢出:隐藏；位置:相对；填充顶部:65%；}

任何帮助将不胜感激.

解决方案

如果图片足够大，可以使用 max-width 和 max-height 代替width 和 height.这将根据需要减小图像的大小，同时保持纵横比.

img {最大宽度:70%；最大高度:70%；}

要居中，您可以使用绝对居中技术...

.wrap {位置:相对；}图片{保证金:自动；位置:绝对；顶部:0；左:0；底部:0；右:0；}

html, body, .image, .wrap {高度:100%；填充:0；边距:0；}.裹 {位置:相对；}图片{最大宽度:70%；最大高度:70%；保证金:自动；位置:绝对；顶部:0；左:0；底部:0；右:0；}.文本 {边距顶部:-50px；文本对齐:居中；}

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

<div class="text">向下滚动</div>

... 或类似的固定居中技术.

img {最大宽度:70%；最大高度:70%；保证金:自动；位置:固定；顶部:0；左:0；底部:0；右:0；}.文本 {位置:固定；底部:0；宽度:100%；文本对齐:居中；}

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

<div class="text">向下滚动</div>

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

但是如果你想让它填满屏幕，即使图像更小，你也可以使用 object-fit: 包含:

img {宽度:70%；高度:70%；适合对象:包含；}

img {宽度:70%；高度:70%；适合对象:包含；保证金:自动；位置:固定；顶部:0；左:0；底部:0；右:0；}.文本 {位置:固定；底部:0；宽度:100%；文本对齐:居中；}

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

<div class="text">向下滚动</div>

注意 IE 尚不支持 object-fit.

I am trying to do the following...

1. Have an image that will always be horizontally and vertically centered on a page, whatever the screen size.
2. Maintain aspect ratio on resize
3. 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屋！