image 标签的 width 和 height 有大作用!!!

野性酷女 2024-05-24 03:47 66阅读 0赞

## `image` 标签的 `width` 和 `height` 有大作用!!! ##

我们将在这里探讨一个问题, 如果在加载图片之后不影响图片下边文字的移动.

在给出答案之前, 要知道 `width` 在 2019 年之后 [有了更多能力][Link 1]. 也就是浏览器会根据 `width` 和 `height` 计算 `aspect-ratio`. 当然, 为了实现我们的目标, 提前知道图片的宽高比是必须的.

感谢百度, 因为我用了百度的 `logo` 图片作为展示. 图片的大小是 `540*258`

![4b1972ea6750474a3e45528be8f30ed9.png][]

### `width` 最开始的用途 ###

`width` 和 `height` 用来指定图片的宽度和高度, 虽然要求值都是以 `px` 为单位的数字, 但是下图中带单位的写法写生效  
![在这里插入图片描述][495c01e5d32c41f8b5605043efaf1bcf.png_pic_center]

作为标签属性的 `width` 是可以被 `CSS` 中的 `width` 覆盖的.  
![在这里插入图片描述][0409057d4b5e42a4b4d74a282bab290e.png_pic_center]

### 发挥作用 ###

下面我们需要开始处理. 将 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)

来看效果  
![在这里插入图片描述][507bcb91854c4023bee7a582399871b3.gif_pic_center]

感觉不错, 但是文字还是发生了一些抖动, 分析后我发现可能是图片对齐问题, 为了验证我的想法, 我在图片前面加上了一个字母 `x`

<div class="box">
      x<img id="bg" src="" width="90" height="43">
      <div>Lorem...</div>
    </div>

![在这里插入图片描述][18e17c215ddc46e68647fb5fe5b33fd7.gif_pic_center]

我们知道 `x` 下边缘就是行盒子 `baseline` 的位置. `x` 的位置变动就表示行高发生了变化. 而图片的下边缘是在 `baseline`, 所以图片抖动的原因就是 `baseline` 发生了偏移.

![在这里插入图片描述][d718e9f3023a446a9fae32fa69151686.png_pic_center]

当 `baseline` 下移后, `descender` 的距离就是文字抖动的距离.  
![在这里插入图片描述][95fc2594706440849bb09bc478d01a11.png_pic_center]

为了阻止文字移动, 我们要阻止 `baseline` 的移动, 或者我们通过指定图片的 `vertical-align` 为 `bottom` 也可以达到相同的效果.

![在这里插入图片描述][fb0dbe9030db43e085dcb2dd8d5d70e7.gif_pic_center]

哈哈哈我们完成了最开始设置的目标. 喝杯奶茶?庆祝一下吧~ 谢谢你看到这里?

[Link 1]: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
[4b1972ea6750474a3e45528be8f30ed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/3da516e565b34fb198978667d25fb471.png
[495c01e5d32c41f8b5605043efaf1bcf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/cac72eb33f484154a096b4750570d61d.png
[0409057d4b5e42a4b4d74a282bab290e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/899c6725964642a881c027564a6b5567.png
[507bcb91854c4023bee7a582399871b3.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6e2fd83bfeee4cc9bff4b0e9bc52c986.gif
[18e17c215ddc46e68647fb5fe5b33fd7.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/118077afc38f44a78556f8b033c10ae3.gif
[d718e9f3023a446a9fae32fa69151686.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/59e5cb009794459e89400454357349f8.png
[95fc2594706440849bb09bc478d01a11.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/459b272d0fb6442cabc8454d971eaa02.png
[fb0dbe9030db43e085dcb2dd8d5d70e7.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/aec498873daa4de7a91623df9ab6233e.gif