记录img标签with和height属性，如何影响图片渲染问题

大花也是花2024-03-26 16:22

先上结论

总结如下：

当我们设置一段如下的代码时

js 复制代码

<img src="https://live.mdnplay.dev/zh-CN/docs/Web/HTML/Element/img/clock-demo-400px.png" 
width="100" height="100" alt="MDN logo" 
srcset="clock-demo-400px.png" />

原图的尺寸是400 * 398并不是一个规则的正方形，但我们对img标签的width, height属性做如下调整

如果<img>标签只是设置了width时：

从上图我们可以看出，最终整个图片的渲染尺寸，是200 * 199尺寸，等同于以img的width的属性为最终的渲染基准，然后以原图的宽高比进行缩放，得出最终的渲染高度为199px

如果<img>标签只是设置了height时：

从上图我们可以看出，最终整个图片的渲染尺寸，是201 * 200尺寸，等同于以img的height的属性为最终的渲染基准，然后以原图的宽高比进行缩放，得出最终的渲染宽度为199px

如果<img>标签同时设置了width和height时：

从上图我们可以看出，最终整个图片的渲染尺寸，是100 * 200尺寸，等同于以img的width * height的属性为最终的渲染结果，不再进行缩放

总结

知识点虽然小，但是也值得记录。

上述只是自己浅浅理解，肯定存在些许错误，如有错误，恳请指正