關於圖片素材和所需盒子大小不一樣的解決
阿新 • • 發佈：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>