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>