简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > 前端问答 > 正文

img元素可以用css吗

藏色散人
发布： 2022-12-30 11:11:28
原创
3219 人浏览过

img元素可以用css设置样式，其设置方法：1、通过css width等属性设置img的尺寸；2、使用CSS的border属性给img图片加边框；3、通过设置a标签将图片设置为链接；4、使用text-align属性设置图片水平对齐方式等。

img元素可以用css吗

本教程操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。

推荐：css视频教程

一、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图片作为链接

图片作为链接，也就是将其置于之内。

代码实例如下：

<!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>
登录后复制

上述代码将图片放入链接中，点击可以实现跳转动作。

需要特别注意的是，将图片放入链接之中，图片可能会出现不必要的边框，添加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吗的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css img
来源：php.cn
上一篇：css class是什么意思 下一篇：css设置不了中文字体怎么办
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
边框半径不适用于锚点内的 img 我正在使用以下HTML代码：<aclass="-video-detail-qualifiers-branding"><imgsrc="...
来自于 2024-04-06 17:20:25
0
1
347
for循环随机从1到0 基本上，每次刷新页面时，for循环都有可能从1变为0。我不知道为什么会发生这种情况，但它影响了我的图像彼此分层的方式。我尝试使用foreach循环，但它仍然给了我相同的结果。这是f...
来自于 2024-04-06 16:48:14
0
1
393
在手机尺寸屏幕上，如何将段落向左移动的CSS和HTML方法 在正常的16:9电脑屏幕上看起来很完美，文字在左边，图片在右边。但是，当涉及到较小的屏幕（例如手机尺寸的屏幕）时，它确实会像我想要的那样在段落顶部显示图片。我对此很陌生，所以请帮忙...
来自于 2024-04-04 20:25:22
0
1
330
React 组件内部函数的意外输出 我导入了两种图像（IMG和IMG2）。IMG假设在视口宽度小于600px时显示，而如果视口宽度大于或等于600px，则显示另一张。所以我添加了一个函数来检查视口宽度，然后它返回这两...
来自于 2024-04-03 00:17:44
0
1
285
如何在html中为connect-src内容安全策略设置通配符？ 在html中我有这个<metahttp-equiv="Content-Security-Policy"content="default-src'...
来自于 2024-04-02 16:12:49
0
1
414
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！