前端css解决背景图、图片自适应的问题【通用】

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅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("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic34.nipic.com%2F20131105%2F13924676_143905261155_2.png&refer=http%3A%2F%2Fpic34.nipic.com&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 节点

<img
  class="img-self-adaption"
  src="./images/微信截图_20220425160549.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("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic34.nipic.com%2F20131105%2F13924676_143905261155_2.png&refer=http%3A%2F%2Fpic34.nipic.com&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">
            <img
              class="img-self-adaption"
              src="./images/微信截图_20220425160549.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

✍4、演示效果

在这里插入图片描述

💡往期精彩

🈯前端echarts大小屏自适应与自定义Tab切换hover效果

🈯前端css解决z-index 上层元素遮挡下层元素的方法

🈯前端字符编码-木鱼百科【最基础、但你不一定都知道】

🈯vue实现echarts可视化【定制主题 + 通用写法】

🈯前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了(前端css解决背景图、图片自适应的问题【通用】)，希望可以帮到大家，谢谢。 > 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟 > 🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

© 文章护眼模板—版权所有 【水香木鱼】2022-04-25

posted @ 2022-06-21 08:44  水香木鱼  阅读(1695)  评论(0)  编辑  收藏  举报