css+background實現 圖片寬高自適應,拉伸裁剪不變形

 

圖片寬高不固定 ,同樣實現自適應,拉伸裁剪不變形,適應各大兼容性。瀏覽器

 


 下面我們在網上找兩張寬高不同的照片:測試

          No.1                                              No.2url

      

 

從上圖看一個寬的一個窄的,很難作到自適應,無奈可惡的產品經理,只能本身想辦法了spa

 請看下面圖片,經在各大瀏覽器和手機端測試,是好用的                       3d


        

  我們先來個對比:調試

 

    好用                                                很差用code

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面是調試好用的代碼:直接放個div就OK啦。blog


 

 

<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>
相關文章
相關標籤/搜索