img元素可以用css设置样式吗?

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前端知识,请查阅 HTML中文网 !!

以上就是img元素可以用css设置样式吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏