背景图像对齐问题 [英] Background image alignment troubles
本文介绍了背景图像对齐问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我正在尝试创建一个网站而且我遇到了一些麻烦：
我似乎无法获得适合宽度的图像页面，然后垂直缩放以保持比例。我该怎么做？
< ！DOCTYPE html PUBLIC >
< html >
< head >
< title > Untitled Document < / title >
< / head >
< 风格 >
#banner {
position：absolute;
top：0px;剩余
：0px;
右：0px;
宽度：100％;
身高：100％;
z-index：-1;
}
< / style >
< body >
< img id = banner src = MTBHome1.jpg alt = 横幅图片 style = position：fixed;左：0;顶部：0 / >
< h1 > < center > Tribe < ; / center > < / h1 >
< ; p > < center > 这是文本< / center > < / p >
< / body >
< / html >
这是我到目前为止所拥有的，它给我全屏/页面外观，但图像并不总是保持比例。应该添加什么来做到这一点？而且，我认为，通过这样做，滚动条会自动添加？
谢谢。
解决方案
这应该可行，只需将高度降低100％即可缩放：
＃ banner {
position ： 绝对;
top ： 0px;
left ： 0px;
right ： 0px;
width ： 100％;
z-index ： -1;
}
Hello everyone, I am trying to start a website and I have run into a bit of trouble:
I cannot seem to get an image to fit the width of a page, and then scale itself vertically to keep proportions. How would I go about this?
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
</head>
<style>
#banner {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<body>
<img id="banner" src="MTBHome1.jpg" alt="Banner Image" style="position: fixed; left: 0; top: 0"/>
<h1><center>The Tribe</center></h1>
<p> <center> This is text </center> </p>
</body>
</html>
That is what I have so far, and it gives me the full screen/page look, but the image does not always maintain proportion. What should be added to do this? And also, I assume, that by doing that, scroll bars are automatically added?
Thank you.
解决方案
This should work, just drop the 100% on the height and it should scale:
#banner { position: absolute; top: 0px; left: 0px; right: 0px; width: 100%; z-index: -1; }
这篇关于背景图像对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
