HTML图像跨整个屏幕 [英] HTML Image going across entire screen
问题描述
所以我有这个div元素
< footer>< div id =foot-erstyle = background-image：url（images / Home / space.gif）; height：190px; width：1349px; border：1px solid black; line-height：1.7em;>< / div>< / footer>
// CSS
＃foot-er
{
}
此图片不会在整个屏幕上展开，在图片周围留下白色。我试图研究这在谷歌，但只是发现如何不切断图像和显示完整的图像。我的问题不在于图片被截断，而是不会跨越整个屏幕。
空间stary图像是div图像。橙色/蓝色图像是身体背景。
TL; DR 此问题是由body元素上的边距引起的
body元素上的默认属性是什么
根据 w3c默认，body元素包括下面的css
body {
display：block;
margin：8px; }
body：focus {
outline：none; }
这些属性使得更容易阅读没有任何格式的文本，
有什么默认属性可以处理图像不会贴在页脚的问题
因为margin：8px;附加到身体，身体内的所有元素将在它们和浏览器窗口的边缘之间有8px的间隙。
虽然这个差距是由html的草图设计的，它会成为问题，因为它阻止了浏览器窗口侧面的东西。
可以解决这个问题
这个问题可以通过以下解决方案之一来解决：
对主体元素
使用以下css代码
{margin：0; }
您可以从html中删除边距，允许webapp触摸屏幕两侧。但是，它有它的缺点，即：
- 您需要在设计中添加边距/ paddings以防止它接触减少可读性
body {margin：0px; } p {margin-top：8px; margin-left：8px;}＃image {background-color：black; height：100px;}
< body& < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < div id = image>< / div>< / body>
在图像上使用绝对/固定定位
通过对图像使用绝对/固定定位，可以强制渲染图像的位置绦虫。
这可以通过做：
#image {
position：absolute;
left：0;
right：0;
bottom：0;
}
这有其优点，你有一个页脚总是在底部页面，无论你的浏览器有多大。这也有自己的缺点，包括：
- 如果图像上面的文字是大的，创建一个滚动条，这些可以通过添加margin-bottom：100px;
#image {position：absolute; left：0; right：0; bottom：0;}＃image {height：100px; background-color：black;}
< body& < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < p>文字< / p> < div id = image>< / div> < / body>
So I have this div element
<footer><div id="foot-er" style="background-image: url(images/Home/space.gif); height: 190px; width: 1349px; border: 1px solid black; line-height:1.7em;"></div></footer>
// CSS
#foot-er
{
}
This image does not stretch across the entire screen, leaving white around the image. I tried researching this up in google but only found how to not cut off the image and show the full image. My problem here is not that the image is being cut off, but it won't stretch across the entire screen.
The space stary image is the div image. The orange/blue image is the body background. How would I get the div image to stretch and cover the body image.
TL;DR This problem is caused by the margin on the body element
What are the default properties on the body element
According to the w3c default, the body element includes the following css
body {
display: block;
margin: 8px; }
body:focus {
outline: none; }
These properties make it easier to read text without any formatting as the text isn't touching the sides of the browser window, the same as a book
What has the default properties to do with the problem of the image not sticking to the footer
Because of the "margin: 8px;" attached to the body, all elements inside the body will have a gap of 8px between them and the edge of the browser window. While this gap is created by design by the draft of html, it will become problematic because it prevents puttings things against the side of the browser window.
How can this problem be solved
This problem can be solved by 1 of the following solutions:
Removing the margin on the body element
By using the following css code
body { margin: 0; }
You can remove the margin from the html, allowing you webapp to touch sides of the screen. however, this has its drawbacks, namely:
- You need add margins/paddings to your design to prevent it from touching the sides where it decreases readability
body { margin: 0px; }
p {
margin-top: 8px;
margin-left: 8px;
}
#image {
background-color: black;
height: 100px;
}
<body>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<div id=image></div>
</body>
Use absolute/fixed positioning on the image
By using absolute/fixed positioning on you image, you can force the place where the image is rendered to the correct cordinates. This can be done by doing:
#image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
This has its advantages that you have a footer that is always at the bottom of the page, no matter how large your browser is. This also comes with its own disadvantages, these include:
- If the text above the image is to large, it will flow under the picture before creating a scroll bar, these can be countered by adding "margin-bottom: 100px;" to your body element so the text will leave a bigger cap at the bottom of the page
#image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#image {
height: 100px;
background-color: black;
}
<body>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<div id=image></div>
</body>
这篇关于HTML图像跨整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
