【CSS】css3 background属性 图片不同展示方式

开发中经常会有上传图片的需求，关于图片的展示也有很多种，接下来我们来看看不同展示方式的实现（以一张长图和一张宽图作对比）：

1、最简单粗暴的方法，直接使用img标签，给宽或高，图片比例不会变：

width: 200px;   //或给定height

2、使用img标签，给定宽和高，图片比例会变：

width: 200px;
height: 200px;

3、使用css background属性 background-size属性：

  以下例子设置了

background-repeat: no-repeat;

（1）background-size: 100%：

background-size: 100%;   //图片比例不会变

 （2）background-size: 100% 100%：

background-size: 100% 100%;   //图片会铺满,比例会变

 （3）属性cover

    会把背景图扩展至足够大，使背景图完全覆盖背景区域。背景图的某些部分也许无法显示在显示区域。

background-size: cover;

    在这种情况下再加上（开发中经常用到这种展示方式）：

background-position:center;

  （4）属性contain

    会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

background-size: contain;

4、使用padding-top: (percentage)实现响应式背景图（此方法来自这位大神）：

实现原理： 将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽定的，比如第一张长图的宽是720px，高是1146px

padding-top = (高度 / 宽度) * 100% = 159.17%

但仅仅对图片宽高缩放还不够，我们需要background-size: cover，使这个属性让背景铺满元素，但IE8以下不支持该属性，因此为了兼容IE下面的浏览器，我们需要加上background-position: center，同时我们也需要保证图片的宽度最大等于父容器的宽度，代码如下：

 HTML：

<div class="column">
    <div class="figure"></div>
</div>

CSS：

.column{
        max-width: 720px;
 }
 .figure {
         padding-top:159.17%; /* 316 / 1024 */
         background: url("https://github.com/Tiffany-yuan/ImgShowTest/blob/master/imgs/long.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }