CSS:规模背景图像下来,如果不是窗口​​变大,保持在100%,否则 [英] CSS: Scale background image down if larger than window, keep at 100% otherwise

查看:110
本文介绍了CSS:规模背景图像下来,如果不是窗口​​变大,保持在100%,否则的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想部署在我的网站的身体与窗口的分辨率比例缩小的背景图像,但不会扩展超出它的原始尺寸(1920×1080)。这样一来,用户与较小的分辨率仍然可以看到整个图像,但这些超越没有一个丑陋的背景放大的

I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but those beyond do not have an ugly upscaled background.

它看起来并不像像最大宽度,我通常会使用这样的目的,背景图片支持的属性。

It doesn't look like background images support properties like max-width, which I would usually use for a purpose like that.

还有什么解决方案呢?这是可能的CSS,无需额外的脚本?

What could the solution be? Is this possible in CSS without extra scripting?

推荐答案

我会用一个div作为具有最大宽度的包装,并设置背景的DIV。

I would use a div as a wrapper with a max-width and set the background to that div.

HTML

<body>
 <div class="container">Content</div>
</body>

CSS

.container {
  width: 100%;
  max-width: 1920px; /* YOUR BG MAX SIZE */
  background:url("bg.png") no-repeat;
  background-size: 100%;
}

这篇关于CSS:规模背景图像下来,如果不是窗口​​变大,保持在100%,否则的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆