189 8069 5689

img元素能不能用css-创新互联

这篇文章主要介绍img元素能不能用css,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联服务项目包括崆峒网站建设、崆峒网站制作、崆峒网页制作以及崆峒网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,崆峒网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到崆峒省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

一、CSS控制img图片的尺寸






 
img{
  width:120px;
  height:100px;
}
 
 
 

 

上述代码设置img图片长宽分别为120px与100px。

但是需要注意的是,使用css粗暴的设置图片尺寸可能会导致变形。

如果不希望图片变形,主要注意图片的长宽比例。

二、给img图片加边框

实际应用中,可能会给图片添加边框效果。

使用CSS的border属性即可实现。

代码实例如下:






 
img{
    width:220px;
    height:100px;
    border:2px solid blue;
}
 
 
 

 

上面代码为img图片添加了一个宽度为2px的蓝色边框。

关于border边框的更多内容可以参阅CSS border边框一章节。

三、img图片作为链接

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

代码实例如下:






 
img{
    width:40px;
    height:20px;
    border:2px solid blue;
    border:none;
}
 
 
 
>
 

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

需要特别注意的是,将图片放入链接之中,图片可能会出现不必要的边框,添加border:none即可。

四、设置图片水平对齐方式

仅以设置图片水平居中对齐为例子,代码实例如下:






 
div{
  width:300px;
  height:300px;
  text-align:center;
  background-color:#ccc;
}
img{
  width:100px;
  height:100px;
}
 
 
 
 

使用text-align属性可以实现设置图片水平对齐方式的功能。

需要注意的是,此属性是设置在图片的容器元素智商,而不是图片元素本身。

五、设置图片垂直对齐

下面以一个常见的代码作为演示。

文本框与验证码通常要水平对齐,这样比较美观。

代码实例如下:







div img{ 
  vertical-align:middle
}
input{
  height:52px;
}



上面代码可以实现文本框与验证码的垂直对齐效果。

核心代码如下:

div img{ 
  vertical-align:middle
}

上述代码要设置在图片元素本身之上。

以上是“img元素能不能用css”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网页名称:img元素能不能用css-创新互联
链接地址:
http://jkwzsj.com/article/dcsssh.html

其他资讯