HTML之img图形标签的显示特点

初学java,学习WEB阶段发现的有趣现象。如有错误请指正,谢谢。


1.图片标签简介

图形标签:<img />(自关闭标签)
属性:
src:图形地址
width:宽度   
height:高度  
border:边框
align:对齐方式,代表与图片相邻的文本的相对位置(有三个属性值:top middle bottom)

alt:图片的文字说明


2.width和height属性对图片显示的影响

原图:1000*1200px


        (1)width和height全部以%显示,例width="50%" height="100%"

                不论height属性值为百分之多少,图片会保持原本比例不变,但仅以width的大小显示图片显示尺寸。

                上传图片好像看的不直观,描述:显示原比例,显示效果:500*600px。也就是以width比例缩放图片。  

        以下同理:

(2)width用px,height用%,还是根据width保持图片原本比例显示大小
(3)width="50%" height="200px",出现拉伸,显示宽度为原图50%,高度只有200px
(4)width="10px" height="200px",按照px值代表的尺寸拉伸原图(原图内容会全部显示)。

猜你喜欢

转载自blog.csdn.net/chengsw1993/article/details/80502849