在制作 html 页面中, 经常需要使用 CSS 来改变图片的大小来实现想要的效果, CSS 设置图片大小有几种方法. 下面本篇文章举例讲解怎么用 CSS 设置图片大小, 有需要的朋友可以参考一下, 希望对大家有所帮助.
使用 CSS 设置图片大小
1, 新建一个 HTML 文件, 命名为 test.HTML, 用于讲解 CSS 怎么改变图片的大小.
2, 在 test.HTML 文件中, 使用 div 标签创建一个模块, 在 div 标签内, 使用 img 标签创建一张图片.
3, 在 test.HTML 文件中, 在 CSS 标签内, 使用 "*" 来初始化页面所有元素, 设置内外边距都为 0. 在浏览器打开 test.HTML 文件, 查看实现的效果.
4, 通过元素名称来改变图片的大小. 例如, 在 CSS 标签内, 使用 CSS 定义 div 元素内的 img 元素的宽度为 200px, 高度为 100px.
5, 通过给 img 标签设置一个 id 属性, 在 CSS 中通过 id 属性, 使用 width(宽度)和 height(高度)设置样式, 实现改变图片的大小.
6, 通过给 img 标签设置一个 class 属性, 在 CSS 中通过 class 属性, 使用 width(宽度)和 height(高度)设置样式, 实现改变图片的大小.
7, 通过在 img 标签内, 使用 style 来设置 width(宽度)和 height(高度)属性.
以上几种方法实现的效果如下:
总结:
方法一: 在 CSS 样式中, 通过元素名称 (即 img), 使用 width(宽度) 和 height(高度)设置样式, 实现改变图片的大小.
方法二: 在 CSS 样式中, 通过给 img 标签设置一个 id 属性, 再使用 width(宽度)和 height(高度)通过该 id 来设置样式.
方法三: 在 CSS 样式中, 通过给 img 标签设置一个 class 属性, 再使用 width(宽度)和 height(高度)通过该 class 来设置样式.
方法四: 在 img 标签内, 使用 style 来设置 width(宽度)和 height(高度)属性.
更多 web 前端自学 https://www.html.cn/ 的相关知识, 可访问: https://www.html.cn/book/css/ 教程 !!
来源: http://www.css88.com/qa/css3/17940.html