css控制元素背景100%自适应元素宽高,背景图全显示

来源：网络文章列表 2019-01-10 8

background-size： 100% 100%;实现给固定宽高的元素背景100%全部显示的效果

很多时候，我们给一个元素设置背景图，背景图又是大于元素的宽高的（通常在按钮或者banner等上很常见），那么我们怎么让背景图片全部显示出来呢。

我们可以通过css里的background-size实现图片，背景图片等比例放小，保证图片不会变形。

代码为：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
   .jiangpai{
   	  background: url("jinpai.jpg") no-repeat;
	  background-size:100% 100%; /* 关键性代码 */
	  width:40px;
	  height: 50px;
   }
</style>

</head>
<body>
  <div class="jiangpai"></div>
</body>
</html>

效果如下：