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>