css3,background-color:背景缩放

最新推荐文章于 2024-07-08 12:47:09 发布

原创最新推荐文章于 2024-07-08 12:47:09 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

响应式专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用CSS设置背景图片并控制其尺寸的方法。通过不同的background-size属性值，如具体尺寸、百分比、cover和contain等，可以实现背景图的精确布局。示例代码展示了如何将一张图片作为div元素的背景，并使用contain值使图片保持原始宽高比的同时填充整个区域。

部署运行你感兴趣的模型镜像

 <style type="text/css">
        div{
            width: 800px;
            height: 500px;
            border: 1px solid #000;
            background: url(img/am.jpg) no-repeat;
           /*  background-size:100px 200px; */
           /* background-size:500px; */
           /* background-size:100%; */
           /* background-size:cover; */
           background-size: contain;
        }
    </style>
</head>
<body>
    <div></div>
</body>