css+background实现 图片宽高自适应，拉伸裁剪不变形

 

图片宽高不固定 ，同样实现自适应，拉伸裁剪不变形，适应各大兼容性。

 

---

 下面我们在网上找两张宽高不同的照片：

 　　　　　   　No.1                                              No.2

      

 

从上图看一个宽的一个窄的，很难作到自适应，无奈可恶的产品经理，只能本身想办法了

 请看下面图片，经在各大浏览器和手机端测试，是好用的                       

---

        

　　我们先来个对比：

 

　　　　好用                                                很差用

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面是调试好用的代码：直接放个div就OK啦。

---

 

 

<div style="
　　width:500px;
　　height:600px;
　　border: 1px solid #000000;
　　background: url(http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg) no-repeat;
　　background-size:cover;
　　background-position: center center;
">
</div>
<div style="
　　width:500px;
　　height:600px;
　　border: 1px solid #000000;
　　background: url(http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg) no-repeat;
　　background-size:cover;
　　background-position: center center;
">
</div>