CSS 之背景图片平铺 与 object-fit

一、控制背景图片的尺寸

background-size 是 CSS 中一个非常重要的属性，用于控制元素背景图片的尺寸。
通过设置 background-size，开发者可以根据布局需求，灵活地调整背景图像的大小，创造出更加丰富和美观的页面效果。

background-size: auto | cover | contain;

二、控制背景图片的位置

background-position 属性用于定义背景图像在元素中的初始位置。

background-position: top | right | bottom | left | center;

例如：
背景图像从元素的左上角开始显示。

background-position: top left;

背景图像在元素的水平方向和垂直方向上居中显示。

background-position: center center;
background-position: 50% 50%;

三、代码示例

下面两种实现方式，最终效果显示一样。

<html>
<head>
    <style>
        .main{
            height:100vh;
            display: flex;
        }
        .left{
            height:100%;
            width:55%;
            background-color: #f1f1f1;
        }
         .right{
            height:100%;
            width:45%;
        }
        img{
            height:100%;
            width:100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="right">
             <img src="./bg-cover.jpg"/> 
        </div>
    </div>
</body>
</html>

下面实现方式最终效果跟上面一样。

<html>
<head>
    <style>
        .main{
            height:100vh;
            display: flex;
        }
        .left{
            height:100%;
            width:55%;
            background-color: #f1f1f1;
        }
         .right{
            height:100%;
            width:45%;
            background: url("./bg-cover.jpg");
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
posted @ 2025-03-05 15:15  炎黄子孙，龙的传人  阅读(171)  评论(0)    收藏  举报