本文摘自PHP中文网,作者藏色散人,侵删。
img元素可以用css设置样式,其设置方法:1、通过css width等属性设置img的尺寸;2、使用CSS的border属性给img图片加边框;3、通过设置a标签将图片设置为链接;4、使用text-align属性设置图片水平对齐方式等。
本教程操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。
推荐:css视频教程
一、CSS控制img图片的尺寸
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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属性即可实现。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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>之内。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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即可。
四、设置图片水平对齐方式
仅以设置图片水平居中对齐为例子,代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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属性可以实现设置图片水平对齐方式的功能。
需要注意的是,此属性是设置在图片的容器元素智商,而不是图片元素本身。
五、设置图片垂直对齐
下面以一个常见的代码作为演示。
文本框与验证码通常要水平对齐,这样比较美观。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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>
|
上面代码可以实现文本框与验证码的垂直对齐效果。
核心代码如下:
1 2 3 | div img{
vertical-align:middle
}
|
上述代码要设置在图片元素本身之上。
以上就是img元素可以用css吗的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css right属性不起作用怎么办
css怎么加下划线
koala如何压缩css
css文本设置主要有哪几项属性
css如何制作饼状图
css选择器有哪些?哪些属性是可以继承的?
网页设计中,css一般是指?
css如何设置斜体
css属性区分大小写吗
html怎么加载css
更多相关阅读请进入《img》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » img元素可以用css吗