【CSDN创作优化2】内嵌图片 `＜img＞` 标签`height`和`width`属性

---

🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

---

前些天发现了一个人工智能学习网站，内容深入浅出、易于理解。如果对人工智能感兴趣，不妨点击查看。

写在最前面

在当今的网络世界中，图像是增强网页视觉吸引力和传递信息的关键元素。<img> 标签是HTML中用于嵌入图像的基础元素，而其height和width属性则用于控制图像尺寸，对于优化网页加载速度和改善用户体验至关重要。本文将详细介绍这两个属性的使用方法和最佳实践。

参考：https://www.w3school.com.cn/tags/att_img_height-width.asp

<img> 标签简介

<img> 标签用于HTML文档中插入图像。它是一个空标签，意味着它不需要闭合标签。最基本的使用只需提供一个src（source的缩写）属性，指向想要显示的图像的URL。

控制图像尺寸：height和width属性

height和width属性允许开发者直接在HTML中为图像设定高度和宽度，这两个属性可以接受两种类型的值：像素（px）和百分比（%）。像素值直接设定图像的具体尺寸，而百分比值则相对于图像的父容器的尺寸。

实例

<img src="/i/mouse.jpg" height="200" width="200" />

这段代码将图像的宽度和高度都设置为200像素。

为什么要指定height和width

指定图像的height和width属性有助于浏览器在页面加载之前预留足够的空间给图像，这样可以避免图像加载时页面布局突然改变，从而提升用户体验。这种做法还可以加快页面渲染速度，因为浏览器不需要重新计算和布局页面的其他元素。

注意事项

• 避免使用height和width来缩放图像：直接在HTML中缩放大图像可能会导致不必要的网络负载，因为用户浏览器需要下载完整尺寸的图像，然后再缩放显示。应该使用图像编辑工具在上传到网站之前，先调整图像的尺寸。
• 保持宽高比：如果你改变了图像的高度或宽度，应确保修改后的尺寸保持原图像的宽高比，以避免图像看起来被拉伸或压缩。

使用百分比进行响应式设计

使用百分比值而非固定的像素值可以创建响应式图像，这些图像的大小会根据其容器的大小而变化，从而在不同设备上提供更好的用户体验。

<img src="/i/ct_1px.gif" width="100%" height="auto" />

这段代码会使图像宽度自动调整以填满其父容器的宽度，同时height设置为auto以保持图像的原始宽高比。

小结

正确使用<img>标签的height和width属性对于提升网页性能和用户体验非常关键。遵循上述最佳实践，可以确保你的网站在不同设备和浏览器上都能快速、正确地渲染图像。