开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >CSS背景图片自适应缩放contain/cover

CSS背景图片自适应缩放contain/cover

作者头像

路过君

发布于 2023-02-10 15:12:59

2.1K0

发布于 2023-02-10 15:12:59

举报

文章被收录于专栏：路过君BLOG from CSDN路过君BLOG from CSDN

background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;

background-size属性

contain: 保持图片长宽比缩放，使得容器刚好包含完整图片（上下左右可能有空白）

在这里插入图片描述

cover: 保持图片长宽比缩放，使得图片刚好覆盖容器（上下左右可能被剪裁）

在这里插入图片描述

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

相关产品与服务

容器服务

腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。

产品介绍产品文档