關於圖片素材和所需盒子大小不一樣的解決
阿新 • • 發佈:2018-12-21
css關於盒子和圖片不一樣,如何讓圖片適合比例且不變形地顯示在盒子中
在讀這篇小部落格之前,首先要明確一點,我們所需求的盒子是固定大小,不會因為圖片的大小改變,這在頁面中是很常見的。在我們扒圖的時候肯定會存在所需圖片與盒子大小不一樣的情況。
盒子為小,圖片為大,這是最常見的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景圖片的合適位置</title> <style> .box{ width: 300px; height: 300px; background:url(images/1.jpg) no-repeat; /* 盒子此時絕對很小 */ background-size:100% 100%; /*此時圖片完全顯示在了盒子裡但是很模糊,原因沒有等比例縮放*/ /* 可以修改background的百分數或者直接用一個具體的px代替,修改好後通過backgound-position調位置*/ } </style> </head> <body> <div class="box"> <!-- 圖片的大小為2560 x 1100 非常大呀 --> </div> <script> </script> </body> </html>