如何让css中的background-image图片自适应

已于 2022-05-24 15:52:23 修改
阅读量1.9w 收藏 7
点赞数 6
分类专栏： # Css 文章标签： css css3 前端
于 2021-05-14 21:24:46 首次发布
原文链接：https://www.cnblogs.com/zengkun983/p/9775283.html
版权

亲测可用，若有疑问请私信

默认情况下，background:url(图片路径) 后只会显示图片中的一部分，从左上角算起。

加上以下代码，就实现了背景图片自适应效果了。如果只适应宽度，那去掉一个100%即可。

-moz-background-size:100% 100%; background-size:100% 100%;
PrinciplesMan
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
kfepiza的博客
02-17 3040
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);
笔记-CSS样式
u014793354的博客
09-30 674
css - 背景图片充满整个屏幕 body { /* 加载背景图 */ background: url("…/static/images/index/backImg.jpg") no-repeat; /* 背景图垂直、水平均居中 */ background-position: center center; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ backg...
css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应
最新发布
2401_84715691的博客
05-15 561
这种图片比容器小的情况强行将图片自适应的话图片就失真。但经常会遇到接口获取的不规则图片的情况，一般这种时候会将小于容器的话将其水平、垂直居中。属性就能进一步优化图片的宽高都小于容器的情况了。max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。这是正常的佩琪（如果图片比容器大的话，图片会超出容器）
背景图片适应div的大小
qq_32095903的博客
04-03 7555
对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片
css背景图片全屏铺满自适应不拉伸
weixin_42576186的博客
02-14 1万+
可以使用 CSS 的 background-size 属性来实现全屏铺满背景图片，并且不拉伸。下面是一个例子： body { background-image: url(your-background-image.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fi...
3种CSS实现背景图片全屏铺满自适应的方式
tianxianghuiwei的博客
11-13 1万+
以上就是我今天与你分享的内容，如果你觉得有帮助，请记得分享给你的朋友，也许能够帮助到他。
CSS实现背景图片详解&&全屏铺满自适应的方式
weixin_46433689的博客
05-30 1万+
问题: CSS实现背景图片全屏铺满自适应的方式 解决： （1）background-image:可添加多张背景图片。 参数：url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg);
css中background-size属性使用介绍
12-13
其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动 (通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置) ...
HTML中使背景图片自适应浏览器大小实例详解
08-30
总之，要实现HTML中的背景图片自适应浏览器大小，可以利用CSS的`background-size`属性，或者通过创建一个绝对定位的div来实现。这些技术能够确保无论浏览器窗口如何缩放，背景图片都能保持合适的显示效果，为用户...
大图片根据分辨率自适应宽度仍居中显示
12-13
问题：一个1920*900的大图，在1024*768的分辨率只能显示一部分，希望仍居中显示 解决方案CSS: 复制代码代码如下:width: 100%; background-position: ... background-image:url(@Url.Image(“/XXX/XX.jpg”)); } .book
CSS实现菜单背景自适应宽度的方法
09-24
为了让背景图片随着菜单项的宽度自适应，我们可以使用CSS3中的背景裁剪（background-size）属性。但是，在给定的代码中，并没有使用到这个属性，而是通过定位和内边距来实现。`.load`类的`<div>`设置了`position: ...
HTML中使背景图片自适应浏览器大小.docx
11-22
然后，在CSS代码中设置背景图片的宽高为100%，以便背景图片可以自适应浏览器大小。 例如： ```html <div id="bg"></div> ``` ```css #bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;...
background背景图片自适应_「前端剑指offer第2期」一侧定宽、一侧自适应，尽量多的方案实现？...
weixin_42545066的博客
12-26 209
回答有下面几种方案能实现一侧定宽一侧自适应。1、使用flex布局，这也是目前主流方式。父容器设置display:flex，定宽字元素设置flex-basis或者width，自适应的子元素设置flex: 1，或者flex-grow: 1。2、使用grid布局。父容器设置 display: grid，使用grid-template-rows 和 grid-template-columns 设置格子；子...
css background-image 自适应宽高
热门推荐
chenqk_123的专栏
03-18 22万+
最近接手前端页面，让给调样式。哥纯粹一个代码程序猿，表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传，碰到了问题，页面要在手机上展现，众所周知，手机在中国的牌子很多，很难做到统一。 页面上有五个导航栏，是按百分比设置的，让我搞个背景图，点击某一导航栏的时候，背景改变，BUT，给我的背景图是一张有着固定大小的图片，放上去之后，各种不适应，不和谐，后来就想到如果能让背景图自适应导航栏的
css background-image 自适应宽高——转载
QDY5945的博客
09-29 4160
就是这么简单的一句话，设置背景图，并让它100%的适应导航栏宽高，并设置不重复，大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im...
css的background-image属性&html的img标签
danni_he的博客
09-17 3014
background-image属性值 url()中可以写绝对路径，也可以写相对路径，甚至也可以写其他域名下的图片资源。url()中的路径加不加引号都可以。 绝对路径写法： background-image:url("/imgs/1.jpg"); //或 background-image:url(/imgs/1.jpg); 相对路径写法： background-image:ur...
1、前端背景图自适应
yummy的博客
03-05 5878
1、前端背景图自适应 如何实现前端背景图片自适应浏览器窗口大小，只需要添加如下CSS样式既可， background-image: url("../image/bcg.jpg"); background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size:
html: 设置background-image的大小使自动适应所在容器
李公子的博客
10-09 2万+
样式描述：想给无序列表中每个<li>标签中文字后添加一个图片 <body> <ul class="nav"> <li>一级菜单<span></span></li> <li>二级菜单<span></span></li> ...
background-image使用
m0_62404884的博客
05-18 4万+
目录 background-image:(" ") background-repeat属性（背景平铺） background-size属性（设置背景图片大小） background-position属性（背景图片位置） 1.background-image: url(" ") ; 首先要知道background-image是将图片作为背景，使用方法为： background-image: url("") ; 其次是关于图片路径问题， 如果该...
css 的background-image图片自适应
09-16
CSS的background-image属性并不能直接实现图片的自适应效果，它只是用来设置背景图片的路径。要实现图片的自适应效果，你需要使用background-size属性。通过设置background-size为cover或contain，可以实现背景图片...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值