效果
有的朋友想问了,我明明只写了宽,没有写高,为什么显示这样呢?这个需要大家了解一下,如果,我们只仅仅得写了宽,或者只写了高,
那么对于img这个标签,它会按照你指定的大小,对另一个做等比例的缩放或放大处理,也就是说,本来图片宽100px,高100px,你改写了宽属性,设置width="20px",那么随之的,高也会变成20px,这就是等比例的处理。
我们再看一个例子,同时设置宽和高:
代码如下:
代码
效果如下:
效果
两个属性都设置的话,那么它就会按照你设置的进行展示,有可能会出现图片的拉伸或压缩情况,这种情况的出现,是因为你的图片过大或者过小而导致的,在实际的开发中,我们也要考虑到这种情况,一般UI,会给我们标注图片的尺寸,或者比例,我们按照UI的标注去写,就没有问题。
上边两个就是img的属性,其实也没啥难的,无非就是控制宽高而已,需要注意一下,多个属性之间,我们使用空格隔开,我们再去看另一属性,alt属性,alt 属性用来为图像定义一串预备的可替换的文本,什么意思呢,就是在图片无法加载,或者加载错误的时候,所展示的文本信息,如下图,我们故意把图片的地址写错:
代码
因为我们没有“life1.png”这张图片,加载肯定是错误的,我们看下效果: