文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS背景尺寸:1000 x100图形的封面和背景定位

问CSS背景尺寸:1000 x100图形的封面和背景定位
EN

Stack Overflow用户

提问于 2015-07-29 21:30:59

回答 2查看 123关注 0票数 1

我有个布局问题我似乎搞不懂。它涉及到一个div中的背景图像，它的宽度为视口的100%。背景图像是1000 is宽，但我希望它总是伸展以填充上面提到的div的宽度，无论视口是200 is宽还是600 is宽，还是1000 is宽还是1600 is宽。另一个要求是，图形应该保持其纵横比，除非它的高度小于50 at，此时图形应该保持在50 at的最低高度，并且在div内保持水平居中。这意味着视口越窄，你能看到的图形本身就越少--直到你只能看到它的中心。

我使用的是背景大小:掩护，当视口为>= 500 of时(即背景图形的最低高度为50 of)，效果非常好。然而，我不知道如何保持图形中心作为背景图像宽度在500 as以下。

有CSS规则可以处理这个问题吗？或者我是否需要使用媒体查询和/或javascript来实现这一点？

javascript

html

css

background-image

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-29 21:42:02

与background-size: cover;不同的是，background-size: 100% auto;尝试将其以容器的宽度(而不是高度)为基础。它仍然遵循着它的体长比例，但不再担心身高。

票数 1

Stack Overflow用户

发布于 2015-07-29 22:34:24

你好，你的问题不太清楚。但是你可以用它来拉伸一个背景，covered.You可以在上面设置一个固定的和居中的背景，然后用背景大小来调整它的大小。

html { 
  background: url (images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31711510

复制

相似问题

问CSS背景尺寸:1000 x100图形的封面和背景定位
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景尺寸:1000 x100图形的封面和背景定位EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景尺寸:1000 x100图形的封面和背景定位
EN