这篇文章主要介绍img元素能不能用css，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
img元素可以用css设置样式，其设置方法：1、通过css width等属性设置img的尺寸；2、使用CSS的border属性给img图片加边框；3、通过设置a标签将图片设置为链接；4、使用text-align属性设置图片水平对齐方式等。
一、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
}上述代码要设置在图片元素本身之上。
以上是“img元素能不能用css”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
