你知道吗?其实网页中有很多种图片格式,例如网页中有一种图片格式叫做 PNG,或者有一种图片叫 JPEG,还有另外一个名字叫 JPEG。
网页中其实还有很多其他种图片的格式,比如 GIF,GIF 一般是用来表示动图的,而 AVIF 或者 WebP 这些格式可能大部分同学并没有在网页中过多的去关注过,甚至还有一些 SVG 或者 BMP 的图片也有,这些可能不是大多数同学所经常去关注的图片格式。
今天会在网页代码中去实现自己通过引入一张图片来在网页中进行展示。图片是通过图片标签进行引入的,写一个图片标签,在 src 属性里面去写入当前图片的地址,当前图片地址可以用点斜杠表示。
当前去找到 test.jpg 的图片,找到之后就可以在浏览器中进行预览,通过浏览器进行打开就会发现图片已经展示在浏览器中了,但是这张图片实在是太大了。
可以通过改变代码标签中的"width"属性来修改图片大小,把它改成 100 宽,这个 100 宽就是指 100px 的意思,但是图片又变得太小了,怎么办?可以继续去修改它大小,把它变成 300。
修改完宽度之后发现图片是按比例进行伸缩的,也就是说即使不去修改它的 height 高度也能够放大和缩小,但是一旦手动控制了它的 height 就被压缩了,所以 height 可以不去设置。如果设置一定要提前知道这张图片的宽高比例,随意修改一个宽高都会导致图片进行的变形。