剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰
📌博主介绍
💒首页:水香木鱼
🛫专栏：邂逅CSS
✍简介: 博主,花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🙈 Blog: 陈春波 【技术选用纯前端开发 ✅Vue3+TS+Ant Design of Vue】
🔰 格言:生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
🔋 小目标: 成为会设计 、会开发的 “万能钥匙”
📝文章内容
由于gif 演示 比较模糊 小伙伴们 以实例为主,或亲自尝试。
未来的你,将会感谢如今刻苦努力的自己。@小伙伴们,木鱼带着满满的干货来喽! 👇 小功能,意想不到的大结果
✍1、背景图自适应
DOM 节点
<div class="bj-self-adaption"></div>
cover:把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像no-repeat:背景图将不会被重复适用于以下浏览器支持：Safari 3 +、Chrome、IE 9 + 、Opera 10 + 、Firefox 3.6 + 【-webkit-background-size、 -o-background-size、-moz-background-siz】contain: 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
/* 背景图自适应 */.bj-self-adaption {height: 300px;background: url("/image_search/src=http%3A%2F%%2F1105%2F13924676_143905261155_2.png&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653463678&t=f46dafc2539b3254963a639ef1ad49d5")no-repeat;background-size: cover;background-position: center 0;/* 设置多浏览器支持 */-webkit-background-size: cover; /*设置背景图片的尺寸*/-o-background-size: cover;-moz-background-size: cover;}
✍2、图片自适应
DOM 节点
<imgclass="img-self-adaption"src="./images/微信截图_0425160549.png"alt=""/>
CSS 样式
/* 图片自适应 */.img-self-adaption {width: auto;height: auto;max-width: 100%;max-height: 100%;}
✍3、源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>背景图、图片自适应</title><style>/* 背景图自适应 */.bj-self-adaption {height: 300px;background: url("/image_search/src=http%3A%2F%%2F1105%2F13924676_143905261155_2.png&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653463678&t=f46dafc2539b3254963a639ef1ad49d5")no-repeat;background-size: cover;background-position: center 0;-webkit-background-size: cover;-o-background-size: cover;}/* 图片自适应 */.img-self-adaption {width: auto;height: auto;max-width: 100%;max-height: 100%;}</style></head><body><section><div><h1>背景图自适应</h1><div><div class="bj-self-adaption"></div></div></div><div><h1>图片自适应</h1><div><div style="text-align: center"><imgclass="img-self-adaption"src="./images/微信截图_0425160549.png"alt=""/></div></div></div></section></body></html>
✍4、演示效果
💡往期精彩
🈯前端echarts大小屏自适应与自定义Tab切换hover效果
🈯前端css解决z-index 上层元素遮挡下层元素的方法
🈯前端字符编码-木鱼百科【最基础、但你不一定都知道】
🈯vue实现echarts可视化【定制主题 + 通用写法】
🈯前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
📢博主致谢
非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了
(前端css解决背景图、图片自适应的问题【通用】)，希望可以帮到大家，谢谢。 > 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧!点击【关注+点赞+收藏+评论+转发】支持一下哟 > 🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕
© 文章护眼模板—版权所有 【水香木鱼】-04-25
