全屏背景图像调整大小
我正在尝试将背景图像设置为全屏，并且在窗口上调整图像大小不会更改实际像素大小，但会变小（类似裁剪）。
这就是我的意思：（尝试调整窗口大小，注意图片变小或变大，但不会像素化） http: //jsfiddle.net/G7Qc4/
现在，上面的代码有效，因为图像是 div 的背景，并且我设置了：
background-position: center top;
如果是只是简单
我使用的 nivoSlider 不接受 div 作为图像，所以我必须使用
多谢
I'm trying to set a background image to fullscreen, and on window resize the image doesn't change actuall pixel size, but get's smaller (crop-like).
This is what I mean: (Try to resize window and notice that the picture gets smaller or larger but doesn't pixelate) http://jsfiddle.net/G7Qc4/
Now, the above works because of the image is a background of a div and I've set:
background-position: center top;
If it was just plain <img> it doesn't work which my question is how can I make it work? If there is any way around?
I am using the nivoSlider which doesn't accept div's for image's so I will have to use <img>.
Thanks alot
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我理解，您想使用实际标签作为背景而不是背景图像。
这是我的解决方案：
http://jsfiddle.net/ttZeM/
它需要知道背景图像的尺寸。
有一个 div 持有绝对定位的背景，网站内容绝对定位在它的上面。
为了使背景图像居中，我将其向左移动 -500px，即其宽度的一半。它位于 0px 宽的 div 内部，以
position:absolute; 为中心； left:50%这是一种奇怪的技术，但如果您知道图像大小，它就会起作用。另请注意，bg_wrap div具有overflow:hidden;宽度：100%；这意味着您不会在屏幕边缘看到滚动条。
我希望这就是您所追求的！
If I understand, you want to use an actual tag as a background instead of background-image.
Here is my solution:
http://jsfiddle.net/ttZeM/
It requires knowing the dimensions of the background image.
There is a div holding the background which is absolutely positioned, the site content is absolutely positioned on top of it.
To center the background image, I moved it -500px to the left, which is half it's width. It is inside of a div that is 0px wide, being centered with
position:absolute; left:50%a strange technique, but it works if you know the image size.Also note that the bg_wrap div has overflow:hidden; and width:100%; this means you won't see scrollbars off the edges of the screen.
I hope this is what you were after!
可以使用 CSS3 (
background-size: cover) 来完成，如下所示： http: //jsfiddle.net/mqchen/Kq3pa/It can be done with CSS3 (
background-size: cover), like so: http://jsfiddle.net/mqchen/Kq3pa/