图片溢出

问题描述：

可以详细解释一下

background-size

这串代码的cover contain xxxpx各有什么作用吗？之前老师说了，但是确实没有听懂

Star3327752 2022-04-18

源自：前端综合案例-仿慕课首页 3-3 轮播图

收起

1回答

好帮手慕小小 2022-04-19 13:25:55

同学你好

background-size ：100px 100px; // 调整图片到指定大小；第一个值设置宽度，第二个值设置的高度。

background-size ：50% 90%; // 计算相对于背景定位区域的百分比,第一个值设置宽度第二个值设置高度。

background-size ：contain; // 会保持图像的纵横比，缩小图片来适应元素的尺寸。

background-size ：cover; // 保持图像的纵横比，扩展图片来填满元素。

祝学习愉快~

收起回答

提问者 Star3327752 #1

所以contain是在图片本身像素大于盒子像素的时候让图片缩小适应的。cover反之。是这样吗？

2022-04-19 13:29:44

好帮手慕小小回复提问者 Star3327752 #2

同学你好，实际上contain：会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

cover：会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。例如：

<!DOCTYPE html>
<html>
    <head>
        <!-- 此处编写样式 -->
        <style type="text/css">
            div {
                border: #63A35C 3px solid;
                width: 10%;
                height: 200px;
                background-image: url(images/course/1.png);
                /* background-size: cover; */
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div>
 
        </div>
    </body>
</html>