logo标签列表

如何使用CSS使背景图片覆盖整个屏幕并忽略宽高比？

css
3
background-size: cover 属性可以让图片占据整个屏幕，但它会保持图片的纵横比例，因此在大屏幕上只能看到部分图片。如何让图片不受纵横比例的限制，让图片占据整个屏幕并显示完整的图片呢？ HTML： 
<html>
<head>


<link href="styles.css" rel=stylesheet>

 <title>
 Enjoy ;)
 </title>
</head> <script type="text/javascript" src="getBG.js"></script></head>
 <body>

    <div class="intro">
        <div class="textbg">
    <div class="introText">
     Welcome to PicShare
     </div>

     <div class="introDesc">
        Today's theme is 
     </div>
     </div>
    </div>



<div class="back"> </div>

<div class="bg1" onclick="genBg()"><script>genBg()</script></div>




 </body>

</html>

CSS：

html{
margin: 0px;
height: 100%;
}

body{
height: 100%;
margin: 0px;
background-color: #424242;

}

.intro{           //want this background to take up entire screen 
    height:100%;
    background-color: #424242;
    background-image: url("assets/themes/theme1.jpg"); 
    background-repeat: no-repeat;
    background-size:  cover;
    }
1
分享一些HTML和CSS以获得准确的答案！ - Naren Murali
添加了代码。 - MinorityDev
2个回答
4
你可以使用 background-size: 100% 100% 来实现这个功能，它表示背景区域的宽度和高度分别为100%。
成功了！谢谢。 - MinorityDev
1

您可以将background-size属性设置为以下选项：

  • cover
  • 百分比或像素（＃％＃％/＃px＃px）
  • contain
  • 等等

使用cover选项将使图像缩放以覆盖整个区域，而使用contain选项只会缩放图像，以便完整的图像仍然可见。

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

CSS

div {
  margin-top: 12px;
  width: 400px;
  height: 50px;
  outline: 1px solid #000;
  background-image: url(http://i.magaimg.net/img/1h5k.png);
  background-position: center center;
  background-repeat: no-repeat;
}

#a {
  background-size: cover;
}
#b {
  background-size: 100% 100%;
}
#c {
  background-size: contain;
}
#d {
  /* Nothing */
}

https://jsfiddle.net/ef8cszhw/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接