首页 css3 正文

我要投稿

css3背景缩放-了解CSS3中的background-size（响应式图片等比例缩放）

bendan520 css3

2023-08-29 0 2,259 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

了解CSS3中的background-size（响应式图片等比例缩放）

阅读目录

背景大小的基本属性

背景大小：可以设置背景图片的大小。这个属性是在css3中的。联通这边很多地方都有使用。比如最常见的地方就是做响应式布局的时候。比如之前的项目中有一个轮子。广播图片，为了适应不同尺寸和码率的图片，我们需要使用css3中的媒体查询来设置不同帧率的长度和高度，虽然这些方法可以解决问题，而且解决方案不是很好，而且很长。其实我也想过直接用比例来设置图片的大小。例如宽度（长度）：100%，高度（高度）：100%；并且设置图片的高度为100%并没有生效，图片也没有显示，由于没有设置具体的高度值，所以浏览器在渲染的时候是没有高度的，所以当时的解决方案是使用css3中的媒体查询针对不同的码率以相同的比例缩放不同的高度；明天我们再学习一下background-size的具体属性值，但是用一种新的方法来解决响应式布局的背景图片适配问题。

浏览器支持程度：IE9+、Firefox4+、opera、chrome、safari5+；

基本句型：background-size:length|percentage|cover|contain;

一：长度

属性值是设置背景图片的长度和高度，第一个值是长度，第二个值是设置高度。如果只设置了第一个值，第二个值会手动转换为“auto”；

二：百分比

该属性设置图像的长度和高度与父元素的比例，第一个值是长度，第二个值是高度。如果只设置了一个值，第二个值将设置为“auto”；

三：封面

将背景图像膨胀到足够大，使背景图像完全覆盖背景区域。

四：包含

将图像膨胀到其最大尺寸css3背景缩放，以便长度和高度完全适合内容区域。

设置图像的固定长度和高度

下面我做一些demo来实现下面几个属性值的基本用法；

基本原图的html代码如下：

<h3>原图</h3>
<div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

疗效如右图所示：

设置图片固定长度和高度的代码如下：

例如，设置固定长度为400px、高度为200px后的图片；

HTML代码如下：

<h3>固定宽度400px和高度200px后的图片</h3>
<div class="bsize1"></div>

CSS代码如下：

.bsize1 {
     width:400px;
     height:200px;
     background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
     border:1px solid red;
     overflow: hidden;
  }

疗效如下：

固定长度 400px 和高度 200px - 使用背景大小：400px200px 缩放设置

2.固定长度400px和高度200px——使用background-size:400px200px缩放设置；

HTML代码如下：

<h3>固定宽度400px和高度200px－使用background－size:400px 200px缩放设置</h3>
<div class="bsize1 bsize2"></div>

CSS代码如下：

.bsize2 {
         background-size: 400px 200px;
  }

疗效如下：

固定长度 400px 和高度 200px - 使用背景大小：400px；缩放设置

3.固定长度400px和高度200px——使用background-size:400px的缩放设置；所以第二个参数会被手动转换为auto；

HTML代码如下：

<h3>固定宽度400px和高度200px－使用background-size:400px;的缩放设置</h3>
<div class="bsize1 bsize3"></div>

CSS代码如下：

.bsize3 {
         background-size: 400px;
 }

疗效如下：

固定长度 400px 和高度 200px - 使用 background-size: 1000% 缩放设置

4.固定长度400px和高度200px - 使用background-size: 1000%缩放设置

HTML代码如下：

<h3>固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置</h3>
<div class="bsize1 bsize4"></div>

CSS代码如下：

.bsize4 {
        background-size:100% 100%;
  }

疗效如下：

固定长度 400px 和高度 200px - 使用背景大小：100% 缩放设置

5. 固定长度 400px 和高度 200px - 使用背景大小：100% 缩放设置。

HTML代码如下：

<h3>固定宽度400px和高度200px－使用background-size:100%的缩放设置</h3>
<div class="bsize1 bsize5"></div>

CSS代码如下：

.bsize5 {
         background-size: 100%;
  }

如下：

使用属性cover设置背景图片

6.使用属性封面设置背景图片。

HTML代码如下：

<h3>使用属性cover来设置背景图片</h3>
<div class="bsize1 cover"></div>

CSS代码如下：

.cover {
        background-size:cover;
 }

疗效如下：

使用属性contain来设置背景图片

7、使用属性contain来设置背景图片。

HTML代码如下：

<h3>使用属性contain来设置背景图片</h3>
<div class="bsize1 contain"></div>

CSS代码如下：

.contain {
        background-size:contain;
  }

疗效如下：

设置图片的width属性为100%；高度适应

8、下面我们用图片来做。如果不使用背景图片等，如果给图片设置属性width=100%，它的高度就会自适应。以下 HTML 代码：

<h3>给图片设置属性宽度为100%的情况下，可自适应图片</h3>
<div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

疗效如下：

用另一种形式解决图像适应问题——图像适应问题

9、使用另一种形式解决图片适配问题——图片适配问题，图片长度设置为100%，页面加载时会出现高度塌陷的问题，可以使用padding-top设置比例值实现自适应padding-top=(图片高度/图片长度)*100;

以下 HTML 代码：

<h3>图片自适应问题，图片宽度设置100%，页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/>
 </div>

CSS代码如下：

.cover-paddingTop {
       position: relative;
       padding-top: 50%; 
       overflow: hidden;
  }
 .cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

疗效如下：

使用padding-top:(百分比)实现响应式背景图片

10.使用padding-top:(百分比)实现响应式背景图片

我们都知道，在处理响应式布局时，背景图像会按比例缩放。例如，在前面使用图像的情况下，使用

对于导入的图片，将其宽度属性设置为100%；

如果是，高度将按比例缩放。这是一张图片，那如果是背景图片呢？我之前项目中常见的做法是按照css3媒体查询方法，根据不同手机的码率等css3背景缩放，按比例缩放背景图片的高度，虽然这些方法都可以解决问题，而且用人肉来设置也不好，而且还很冗长。明天我们将学习如何使用padding-top这样的属性来设置；

实现的基本原理：会采用保持元素长宽比的方法，将垂直方向的padding-top值添加到元素上。使用比率，该值是相对于元素的宽度的。比如我的一张图片的长度是1024px，高度是316px；所以目前的

顶部填充=(高度/长度)*100%=(316/1024)*100%=30.85%;

然而，仅仅缩放图片的高度和长度是不够的。我们还必须添加background-size: cover以使背景充满元素。 IE8及以下不支持该属性，所以为了兼容IE容器下浏览，我们还需要添加一个属性background-position: center; 同时我们还需要保证图片的长度最多等于父容器的长度；所以下面的HTML代码如下：

<h3>使用padding-top实现响应性图片(图片的宽度是1024px，高度是316px)</h3>
 <div class="column">
       <div class="figure"></div>
  </div>

CSS代码如下：

.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }