### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2020-02-22

# 「布局技巧」图片未加载前自动撑开元素高度

# # 「布局技巧」图片未加载前自动撑开元素高度

在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。 这种情况我们可以设置如下样式来设置该元素的高度：

    .wrapper
      overflow hidden
      width 100%
      height 0
      padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽
      background #eee

1
2
3
4
5
6

上面代码中，`padding-bottom` 的取值是图片的高宽比（即，高/宽），它会根据 `width`值的`26.66%`计算，最终元素的高度会和图片加载完成后的高度一致。

也可以使用`vw`的方法，但在一些浏览器可能有兼容性问题：

    .wrapper
      width 100%
      height 26.66vw
      background #eee

1
2
3
4

> `vw`，viewpoint width，视窗宽度，1vw=视窗宽度的1%

> `vh`，viewpoint height，视窗高度，1vh=视窗高度的1%

> 更多 CSS单位
> (opens new window)。

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
CSS3之animation动画
文字在一行或多行时超出显示省略号

← CSS3之animation动画 文字在一行或多行时超出显示省略号→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式