CSS3背景大小：封面不会使图像垂直 [英] CSS3 background-size: cover doesn't make image cover vertically
问题描述
当浏览器窗口较短且宽时，我会尝试建立一个背景图片的网站，想让图像扩展，使其顶部填满整个屏幕的长度，其余的是不可见的。
当浏览器窗口高和薄，我想要的图像展开，使其左部分填满整个屏幕高度，其余的是不可见的。
使用CSS3 background-size：cover属性使得前者的工作方式像一个魅力，后者没有。相反，背景图像被缩小以使其在可用的窄区域内完全可见，并缩放到宽度，然后其下面的其余页面是简单的背景颜色。
body {
background-color：＃BF6F30;
color：black;
font-family：Georgia，Times New Roman，sans-serif;
background：url（'...'）;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
如何解决这个问题？
您是否有兴趣只使用CSS背景图片？这可以通过加载图像并用CSS约束它来完成。
这两个示例中的哪一个都可以工作？
HTML b
$ b
< body id =page-body>
< img class =bgsrc =images / bodyBackground1.jpg>
< div class =wrapper>
< / div>
< / body>
CSS
<无重复中心中心固定;没有重复中心中心固定;没有重复中心中心固定;没有重复中心中心固定;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
body {
background：#fff;
margin：0;
padding：0;
overflow：hidden;
}
html，body {
height：100％;
}
img.bg {
/ *设置规则填充背景* /
min-height：100％;
min-width：1024px;
/ *设置比例缩放* /
width：100％;
height：auto;
/ *设置定位* /
position：fixed;
top：0;
left：0;
}
@media屏幕和（max-width：1024px）{/ *特定于此特定图像* /
img.bg {
left：50％ ;
margin-left：-512px; / * 50％* /
}
}
这个将数据库中的图片加载到数组中，并随机加载它们，但您可以从中获取一些信息：
PHP加载函数
<？php
$ bg_images = array（
0 =>'comp1.png'，
1 =>'comp2.png'，
2 =>'comp3.png'，
....
）;
$ image = $ bg_images [rand（0，（count（$ bg_images）-1））];
$ showBG =< img class = \source-image\src = \images / bg /。$ image。\/&
？>
HTML
< pre class =lang-html prettyprint-override>
...
< body>
<？php echo $ showBG; ？>
< div id =wrapper>
...
CSS
$ b
html，body {
margin：0;
height：100％;
}
img.source-image {
width：100％;
position：absolute;
top：0;
left：0;
z-index：0;
min-width：1024px;
}
这些选项应根据高度和宽度填满浏览器窗口。
I am trying to build a website with a background image that I want to always fill up the entire screen.
When the browser window is short and wide, I want the image to expand so that the top part of it fills up the entire screen length-wise and the rest of it is not visible.
When the browser window is tall and thin, I want the image to expand so that the left part of it fills up the entire screen height-wise and the rest of it is not visible.
Using the CSS3 background-size: cover property makes the former work like a charm, the latter does not. Instead, the background image is shrunk so that it is entirely visible within the narrow region available and scaled to the width, and then the rest of the page below it is simply the background color.
body {
background-color: #BF6F30;
color: black;
font-family: Georgia, "Times New Roman", sans-serif;
background: url(' ... ');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
How can I fix this problem?
Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.
Would either of these examples work?
HTML
<body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">
</div>
</body>
CSS
html {
background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:#fff;
margin: 0;
padding: 0;
overflow:hidden;
}
html, body {
height: 100%;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:
PHP load function
<?php
$bg_images = array(
0 => 'comp1.png',
1 => 'comp2.png',
2 => 'comp3.png',
....
);
$image = $bg_images[ rand(0,(count($bg_images)-1)) ];
$showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>";
?>
HTML
...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...
CSS
html, body {
margin:0;
height:100%;
}
img.source-image {
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
min-width:1024px;
}
These options should fill up the browser window according to the height and width.
这篇关于CSS3背景大小：封面不会使图像垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
