我们在布局图片列表时, 通常我们要控制图片的高度和宽度这样来达到图片统一. 我们在 html 布局时候直接在图片 img 标签加宽度和高度属性即可控制图片高和宽.
HTML img 图片标签高度宽度设置
我们可以直接在图片标签设置宽度 width 和高度 height, 这里需要注意的是 HTML img 标签内直接设置宽度和高度值不需要 HTML 单位, 默认为 PX 像素.
img 标签内设置高度宽度优点直观, 对于文章内插入图片可以利用此方法控制设置图片高度宽度; 缺点, 如果图片列表排版的这样会增加很多 HTML 代码, 不便统一修改.
CSS 样式控制 width,height
语法:
img{width:150px;height:60px}
这里设置 CSS 宽度为 150px,CSS 高度为 60px, 注意是 CSS 样式中 CSS width 和 CSS height 的值都带单位也要记住一定带上单位, 这里和 HTML img 标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点.
如果是我们直接对 img 设置样式, 这样会将整个网页中图片宽度高度控制了. 为了控制指定对象内的图片宽度高度样式, 我们通常在 img 前加上对象 CSS 命名.
CSS 设置 IMG 图片宽度和高度实例
1,CSS 设置图片实例描述
我们在一个 HTML 中放图片, 1 张为原始大小图片, 1 张为通过 CSS 设置宽度和高度图片, 通过 2 张图片对比分析通过 CSS 改变图片大小.
2, 实例完整 HTML+CSS 代码如下:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- CSS 控制图片大小
- </title>
- <style>
- .divcss img{ width:300px; height:200px}
- </style>
- </head>
- <body>
- <p>
- <strong>
- 原始图片大小
- </strong>
- </p>
- <p>
- <img src="1.jpg">
- <br>
本身这个图片宽度为 1280px, 高度 1024px</p>
- <p><strong > 通过 CSS 改变设置图片大小 </strong></p>
- <div class="divcss">
- <img src="1.jpg"><br>
这里设置 divcss 盒子里图片宽度 300px, 高度 200px
- </div>
- </body>
- </HTML>
运行结果:
来源: http://www.css88.com/qa/javascript/12689.html