img元素能不能用css_程序开发

创始人

2024-12-28 09:02:33

0次

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;
}
 
 
 
>






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







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

div img{ 
  vertical-align:middle
}