image
标签的 width
和 height
有大作用!!!
我们将在这里探讨一个问题, 如果在加载图片之后不影响图片下边文字的移动.
在给出答案之前, 要知道 width
在 2019 年之后 有了更多能力. 也就是浏览器会根据 width
和 height
计算 aspect-ratio
. 当然, 为了实现我们的目标, 提前知道图片的宽高比是必须的.
感谢百度, 因为我用了百度的 logo
图片作为展示. 图片的大小是 540*258
width
最开始的用途
width
和 height
用来指定图片的宽度和高度, 虽然要求值都是以 px
为单位的数字, 但是下图中带单位的写法写生效
作为标签属性的 width
是可以被 CSS
中的 width
覆盖的.
发挥作用
下面我们需要开始处理. 将 540 和 258 分别除以 6 得到 90 和 43.
<div class="box">
<img id="bg" src="" width="90" height="43">
<div>Lorem...</div>
</div>
#bg {
width: 200px;
height: auto;
outline: 1px solid salmon;
}
在 3s 后才加载图片
const bg = document.getElementById('bg')
setTimeout(() => {
bg.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
}, 3000)
来看效果
感觉不错, 但是文字还是发生了一些抖动, 分析后我发现可能是图片对齐问题, 为了验证我的想法, 我在图片前面加上了一个字母 x
<div class="box">
x<img id="bg" src="" width="90" height="43">
<div>Lorem...</div>
</div>
我们知道 x
下边缘就是行盒子 baseline
的位置. x
的位置变动就表示行高发生了变化. 而图片的下边缘是在 baseline
, 所以图片抖动的原因就是 baseline
发生了偏移.
当 baseline
下移后, descender
的距离就是文字抖动的距离.
为了阻止文字移动, 我们要阻止 baseline
的移动, 或者我们通过指定图片的 vertical-align
为 bottom
也可以达到相同的效果.
哈哈哈我们完成了最开始设置的目标. 喝杯奶茶🥤庆祝一下吧~ 谢谢你看到这里😊
原文链接:https://juejin.cn/post/7318083908604182554 作者:庇耳拉海莱