怎样设置img标签的图片大小?

html-css0306

怎样设置img标签的图片大小?,第1张

html设置图片大小:在img标签上设置图片大小、或者使用css样式控制图片大小。操作方法如下。

设备:戴尔Inspiron15

系统:Win10

软件:visual studio code1.55.2

1、首先打开电脑之后,如下图所示,新建一个“cs”文件夹,在文件夹中存储一张图片用来做演示。

2、接着打开visual studio code点击“文件”-“打开文件夹”,选中上一步建立好的“cs”文件夹。

3、然后点击“cs”右侧的“新建文件”图标,创建一个“1.html”文件,在空白html文件中输入一个英文“!”按Tab键填充html基本代码。

4、接着在body中插入img标签,alt规定图像的替代文本,src规定显示图像的URL。

5、然后在img标签上使用width属性设置图片宽度、height属性设置图片高度。

6、最后在title标签下面插入style标签(如下图所示),接着在style标签中编辑css样式,如下图所示,img{width:100pxheight:auto},这里表示把图片设置为100px宽、auto表示高度根据图片比例自适应。设置图片大小就完成了。

1、css控制图片大小,参考如下代码:

div img {

max-width:600px

width:600px

width:expression(document.body.clientWidth>600?"600px":"auto")

overflow:hidden

}

2、代码说明:

 ◎ max-width:600px在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

 ◎ width:600px在所有浏览器中图片的大小为600px

 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。

 ◎ overflow:hidden超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

img默认是个行内元素,比如在img的前面或后面放一些文字,这些文字会与图片排在同一行。因此,当图片的前后存在一些空格或回车换行符时,它们会与图片一起成为同一块行内元素,从而会造成外面的div被撑得比你想象的尺寸要大一些,比如:<div><img src="..."/></div>而如果是这样就不会:<div><img src="..."/></div>如果给img的css添加display:block属性,它就会变成块级元素(它会独占一行),其前后的空格、回车等也会被自动忽略,这样外面的div的尺寸就会保持与img一致。