在页面上垂直居中图像,并在调整大小时保持宽高比 [英] Vertically center image on page and maintain aspect ratio on resize
问题描述
我想尝试以下操作...
- 有一个图像将始终水平和垂直居中在页面上,
- 在调整大小时保持宽高比
- 有一些文字将始终显示在视口底部。
到目前为止我想出了两个解决方案...
- 解决方案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
andmax-height
instead ofwidth
andheight
. 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
andmax-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屋!
查看全文