关于图片素材和所需盒子大小不一样的解决

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>

　　

posted @ 2018-12-21 00:21  火鸡的呐喊  阅读(1300)  评论(0)    收藏  举报