CSS 图片加载提前占位 padding-top、padding-bottom

这篇具有很好参考价值的文章主要介绍了CSS 图片加载提前占位 padding-top、padding-bottom。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天聊一个图片加载提前占位的一个问题 🤔,内容比较适合初学者。

起因

在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面效果一样:

CSS 图片加载提前占位 padding-top、padding-bottom

假如图片是自适应的,宽度为屏幕宽度的30%,高度等比例缩放,这时候是无法直接设置图片高度的,所以就导致了图片未加载前高度为0,加载成功后撑开的问题。

解决这个问题就需要对图片进行提前占位,这里虽然不确定图片的高度,但是图片的比例是确定的。(要是图片的比例都不确定那就玩不了了😅……)

padding-top

所以有请今天的主角登场:padding-top或者padding-bottom

padding-top的值设置为百分比的时候,让我们先看一下mdn官方是怎么解释的:

当内边距(padding)是一个百分比的时候,百分比是和包含块(containing block)的宽度有关的,同样一定不能为负数。

说白了就是padding-top的值如果是百分比,那么这个百分比是相对于其父容器的宽度的。

比如下面这个案例(案例写成了padding-bottom,效果都是一样的):

.content{
  width: 300px; /* 也可以是百分比 */
  height: 500px;
  background-color: aquamarine;
}
.box{
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 相对于父级宽度,也就是150px */
  background-color: red;
}
<div class="content">
  <div class="box"></div>
</div>

.boxpadding-bottom的50%是相对于父容器.content的宽度决定的,也就是150px。而且.content也不一定是准确的px值,也可以是相对于页面的百分比值,这就适用于响应式的百分比宽度。

CSS 图片加载提前占位 padding-top、padding-bottom

所以我们可以用图片的宽高比作为padding-bottom的值提前把图片所要占用的空间撑开,然后img绝对定位在.content上面就可以达到提前占位的效果。

比如下面案例使用的图片宽高是300px * 450px,那么padding-bottom的值就可以设置为150%

这里为了少写一个div,用伪类代替:

.content{
  position: relative;
  width: 300px;
  font-size: 0; /*  消除内联元素间的间隔(空格) */
}
.content::before{
  content: '';
  display: block;
  width: 100%;  /* 400px 相对于content的width */
  padding-bottom: 150%;  /* 200px 相对于content的width */
  background-color: red;
}
.content img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="content">
  <img src="https://img1.baidu.com/it/u=2348819965,1910380145&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
</div>
<div>下方内容下方内容下方内容</div>

可以看到在加载过程中下方内容没有从上面被挤下来,提升了用户体验。

CSS 图片加载提前占位 padding-top、padding-bottom

大致思路就是这样,主要是使用padding-top或者padding-bottom的百分比用来实现占位效果 😃。文章来源地址https://www.toymoban.com/news/detail-476674.html

到了这里,关于CSS 图片加载提前占位 padding-top、padding-bottom的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Godot 4.0 加载为占位符(InstancePlaceholder)的用法和特点

    加载为占位符 的功能设计上是用来辅助选择性加载场景的。比如一个很庞大的3D世界,玩家一时之间只会处在世界一小部分区域内,同时让整个地图驻留于内存是不现实的,此时需要选择性地灵活加载地图,使用Godot的\\\"加载为占位符\\\"功能可辅助这项工作的进行。 本人以开发2D游戏

    2024年02月03日
    浏览(37)
  • 在线生成占位图片工具:简便快捷的设计利器

    在网页开发或设计过程中,经常会遇到需要临时使用占位图片的情况。占位图片是指在设计阶段或者内容填充时使用的临时图片,用于模拟最终效果。这些占位图片通常用于展示页面布局、图片占位大小、颜色搭配等,以便设计师和开发人员更好地调整布局和设计。为了解决

    2024年04月08日
    浏览(42)
  • 通过css动画来驱动显示菜单面板的收缩-原理-不占位

    菜单进入的方向可以用绝对定位来控制。设置小菜单显示宽度,就可以实现不占位的菜单收缩栏

    2023年04月17日
    浏览(36)
  • 高效工作法:占位图片生成工具助力项目快速迭代

    在现代设计和开发项目中,图片资源的重要性不言而喻。然而,项目中经常会遇到寻找合适图片、调整图片尺寸和格式等问题,这些问题不仅耗时耗力,还可能影响到项目的进度和质量。此时,占位图片生成工具应运而生,它为我们的项目带来了诸多好处,解决了诸多难题。

    2024年01月15日
    浏览(39)
  • CSS中的margin与padding

    目录  一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前,先看一张图,便于理解  一、margin 1.概念及作用 CSS   margin   属性用于在任何定义的边框之外,为元素周围创建空间。 通过 CSS,您可以完全控

    2024年02月11日
    浏览(38)
  • element-ui表格数据为空,图片占位提示

     当表格的绑定数据为空时常需要显示暂无数据等字样,这时候就用到了empty-text 但,当数据为空,想用图片展示呢,如下图    方法一: 可在表格底部列在加入自定义图片  完整代码: 方法二: 使用element的Empty空状态组件,无数据图片占位提示

    2024年02月14日
    浏览(38)
  • CSS中如何隐藏元素但保留其占位空间(display:nonevsvisibility:hidden)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(44)
  • python 利用word中占位符号实现按word指定位置插入图片

    from docx import Document from docx.shared import Inches from docx.oxml.ns import qn from docx.enum.text import WD_ALIGN_PARAGRAPH def center_insert_img(doc, img):     \\\"\\\"\\\"插入图片\\\"\\\"\\\"     for paragraph in doc.paragraphs:         # 根据文档中的占位符定位图片插入的位置         if \\\'img1\\\' in paragraph.text:             # 把占

    2024年02月11日
    浏览(51)
  • 已解决:安卓自带的webview加载前端h5项目白屏时长严重,vue首页加载白屏时间过长,那我让app进入的时候就提前加载网页

    自己写的vue项目,自己写的安卓壳子,本来自己觉得慢,忍忍就过去了,但是人家觉得慢,你不得改么?结果是前端自己开发,安卓也自己开发,想甩个锅都没法甩,总不能甩给后端吧?哈哈哈 描述一下我的情况,我写了一个vue项目,需要嵌在安卓里运行,没想到安卓webvi

    2024年02月03日
    浏览(62)
  • CSS中如何隐藏元素但保留其占位空间(display:none vs visibility:hidden)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包