关于csdn_markdown图片大小不适应问题

时间:2022-12-03 06:11:19

img标签的 height 和 width 属性设置图像的尺寸:

提示:为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。

更为合理的方式:

提示:请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。

最好加上替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

可以这样:
<img src="https://raw.githubusercontent.com/baibaibai66/Matplotlib/pictures/1.2.png" width="60%" alt="还在路上,稍等..."/>
这里设置width=”60%”比设置固定大小width=”400px”效果更好

可以到w3school img看一下。