[英]Removing white space in HTML images
I've reached quite a dilemma. 我已经陷入了两难的境地。 I have an Image that I want to take up the background of a webpage.
我有一张要占用网页背景的图片。 I want it to stretch across the screen width and height, and stay that size.
我希望它可以延伸到整个屏幕的宽度和高度,并保持该大小。 When I use an
<img>
tag, I can't figure out how to stretch it to screen without white bars. 当使用
<img>
标签时,我不知道如何在没有白色条的情况下将其拉伸到屏幕上。 wspace and hspace are deprecated in HTML5, so those don't work. HTML5中不推荐使用wspace和hspace,因此它们不起作用。 Also, I tried implementing it into a CSS style, but I need to fade out the ENTIRE page with jQuery later on, and that isn't possible with putting the image in the CSS with
background-image
. 另外,我尝试将其实现为CSS样式,但稍后需要使用jQuery淡出整个页面,而将图像与
background-image
放在CSS中是不可能的。 Currently I am using this to implement the picture: 目前,我正在使用它来实现图片:
<img class='background' src='Images/backgroundImg.jpg'/>
The background class looks like this: 后台类如下所示:
.background {
max-height:100%;
max-width:100%;
}
What should I add to make the picture take the screen up entirely and still be possible to interact with it via jQuery? 我应该添加什么以使图片完全占据屏幕,并且仍然可以通过jQuery与之交互? Thanks guys!
多谢你们!
No need for max-height and max width, just height and width and positioning. 不需要最大高度和最大宽度,只需高度和宽度以及位置。 Try:
尝试:
.background {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
or you want a sticky positioned image: 或者您想要粘贴的定位图像:
.background {
position: fixed;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
You can try object-fit
property with value cover
. 您可以尝试使用value
cover
object-fit
属性。 Note, make sure to check out the browser support tables, as IE does not support it at the moment. 注意,请确保签出浏览器支持表,因为IE目前不支持该表。
html, body { height: 100%; margin: 0; } img { display: block; object-fit: cover; width: 100%; height: 100%; }
<img src="http://lorempixel.com/400/200/sports">
use 采用
background: url(../Content/Images/wallpaper.jpg) no-repeat center center fixed;
background-size: cover;//scretch image
Okay this is all that you need: 好的,这就是您所需要的:
<style> html { background: url(http://cdn7.viralscape.com/wp-content/uploads/2015/03/Manhattan-City-Line-at-night-New-York.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style>
You just need to change the link that is there, with the path to the picture you want to use ( Images/backgroundImg.jpg
)! 您只需要更改那里的链接,以及要使用的图片的路径(
Images/backgroundImg.jpg
)!
To fade the entire page all you need to use is this: 要淡出整个页面,您需要使用的是:
HTML: HTML:
<div id="overlay">
CSS: CSS:
#overlay{
opacity:3;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
display: none;
}
Then you can use jquery to just change display: none;
然后,您可以使用jquery更改
display: none;
to display: inline-block;
display: inline-block;
or whatever! 管他呢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.