img元素可以用css设置样式，其设置方法：1、通过css width等属性设置img的尺寸；2、使用CSS的border属性给img图片加边框；3、通过设置a标签将图片设置为链接；4、使用text-align属性设置图片水平对齐方式等。
本教程操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。
推荐：css视频教程
一、CSS控制img图片的尺寸
nbsp;html> img{ width:120px; height:100px;} @@##@@
登录后复制
上述代码设置img图片长宽分别为120px与100px。
立即学习“前端免费学习笔记（深入）”；
但是需要注意的是，使用css粗暴的设置图片尺寸可能会导致变形。
如果不希望图片变形，主要注意图片的长宽比例。
二、给img图片加边框
实际应用中，可能会给图片添加边框效果。
使用CSS的border属性即可实现。
代码实例如下：
nbsp;html> img{ width:220px; height:100px; border:2px solid blue;} @@##@@
登录后复制
上面代码为img图片添加了一个宽度为2px的蓝色边框。
关于border边框的更多内容可以参阅CSS border边框一章节。
三、img图片作为链接
图片作为链接，也就是将其置于之内。
代码实例如下：
nbsp;html> img{ width:40px; height:20px; border:2px solid blue; border:none;} @@##@@>
登录后复制
上述代码将图片放入链接中，点击可以实现跳转动作。
需要特别注意的是，将图片放入链接之中，图片可能会出现不必要的边框，添加border:none即可。
四、设置图片水平对齐方式
仅以设置图片水平居中对齐为例子，代码实例如下：
nbsp;html> div{ width:300px; height:300px; text-align:center; background-color:#ccc;}img{ width:100px; height:100px;} @@##@@
登录后复制
使用text-align属性可以实现设置图片水平对齐方式的功能。
需要注意的是，此属性是设置在图片的容器元素智商，而不是图片元素本身。
五、设置图片垂直对齐
下面以一个常见的代码作为演示。
文本框与验证码通常要水平对齐，这样比较美观。
代码实例如下：
nbsp;html>div img{ vertical-align:middle}input{ height:52px;}@@##@@
登录后复制
上面代码可以实现文本框与验证码的垂直对齐效果。
核心代码如下：
div img{ vertical-align:middle}
登录后复制
上述代码要设置在图片元素本身之上。
以上就是img元素可以用css吗的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2954478.html
