img 元素可以用 CSS 设置样式. 下面本篇文章介绍一下 CSS 对于 < img > 图片的常见操作. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
一, CSS 控制 img 图片的尺寸
- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <style type="text/css">
- img{ width:120px; height:100px; }
- </style>
- </head>
- <body>
- <img src="mytest/div+css/border.jpg" />
- </body>
- </HTML>
上述代码设置 img 图片长宽分别为 120px 与 100px.
但是需要注意的是, 使用 CSS 粗暴的设置图片尺寸可能会导致变形.
如果不希望图片变形, 主要注意图片的长宽比例.
二, 给 img 图片加边框
实际应用中, 可能会给图片添加边框效果.
使用 CSS 的 border 属性即可实现.
代码实例如下:
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <style type="text/css">
- img{ width:220px; height:100px; border:2px solid blue; }
- </style>
- </head>
- <body>
- <img src="mytest/div+css/border.jpg" />
- </body>
- </HTML>
上面代码为 img 图片添加了一个宽度为 2px 的蓝色边框.
关于 border 边框的更多内容可以参阅 CSS border 边框一章节.
三, img 图片作为链接
图片作为链接, 也就是将其置于 < a > 之内.
代码实例如下:
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <style type="text/css">
- img{ width:40px; height:20px; border:2px solid blue; border:none; }
- </style>
- </head>
- <body>
- <a href="#">
- <img src="mytest/div+css/border.jpg" />
- </a>
- >
- </body>
- </HTML>
上述代码将图片放入链接 < a > 中, 点击可以实现跳转动作.
需要特别注意的是, 将图片放入链接之中, 图片可能会出现不必要的边框, 添加 border:none 即可.
四, 设置图片水平对齐方式
仅以设置图片水平居中对齐为例子, 代码实例如下:
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <style type="text/css">
- div{ width:300px; height:300px; text-align:center; background-color:#ccc;
- } img{ width:100px; height:100px; }
- </style>
- </head>
- <body>
- <div>
- <img src="mytest/div+css/border.jpg" />
- </div>
- </body>
- </HTML>
使用 text-align 属性可以实现设置图片水平对齐方式的功能.
需要注意的是, 此属性是设置在图片的容器元素智商, 而不是图片元素本身.
五, 设置图片垂直对齐
下面以一个常见的代码作为演示.
文本框与验证码通常要水平对齐, 这样比较美观.
代码实例如下:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <style type="text/css">
- div img{ vertical-align:middle } input{ height:52px; }
- </style>
- </head>
- <body>
- <div>
- <input type="text" />
- <img src="mytest/demo/1.jpg">
- </div>
- </body>
- </HTML>
上面代码可以实现文本框与验证码的垂直对齐效果.
核心代码如下:
- div img{
- vertical-align:middle
- }
上述代码要设置在图片元素本身之上.
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17660.html