怎样在html中控制图片显示大小_随笔

可以用“width”和“height”属性控制图片的显示大小。

1、新建html文件，在body标签中添加img标签，为img标签设置“src”属性，属性值为图片的地址，这时图片的显示大小是图片自身的大小：

2、为img标签单独设置“width”或“height”属性，属性值为宽度或者高度，这时图片的宽度将变成设置的宽度，高度将会按原比例进行缩放：

3、同时为img标签设置“width”和“height”属性，这时图片的大小将会完全按照设置的大小显示：

CSS里设置这两个参数：

背景图background: url(/*图片路径*/) repeat-x/*平铺方式*/

尺寸:backgroun-size:100% 100%。

其实大多数的HTML编辑器 *** 作都是一样的，今天我就以Hbuilder来讲解，首先新建一个HTML页面，这里命名为“new_file.html”。

接着给标签设置背景图片，这里小编设置的是<body>标签。

接着新建一个css文件，如图，小编命名为“1.css”。

这里给body标签设置background-size属性，如果你的标签是div就写div，然后可以设置宽度和高度。

如图所示，在new_file.html里面写上这个：<link href="css/1.css" type="text/css" rel="stylesheet"/>就可以设置背景图片的大小了。

最后在浏览器中预览一下，这里只是部分背景。

在Dreamweaver CS6中新建一个html空白文档，将页面内容放入<body></body>中。选中背景图即可插入。

详细步骤：

工具/材料：

1、新建文件夹并将其命名为“表格”。

2、将背景图放入新建的”表格“文件夹里。

3、在Dreamweaver CS6中新建一个html空白文档。

4、将页面内容放入<body></body>中。

5、在<body后按一下空格键，找到background，再按空格，点击“浏览”，找到背景图的位置。

6、选中背景图，点击“确定”。

7、图片插入完成。

8、将这个html另存为在“表格”文件夹里。

9、点击这个预览图标，就可以在浏览器中查看效果。

10、完成效果图。

参考资料：

百度百科-HTML表单

欢迎分享，转载请注明来源：内存溢出

怎样在html中控制图片显示大小