圖片寬高不固定 ,同樣實現自適應,拉伸裁剪不變形,適應各大兼容性。瀏覽器
下面我們在網上找兩張寬高不同的照片:測試
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>