html怎么设置img样式,img 元素可以用 CSS 设置样式吗?

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

img 元素可以用 CSS 设置样式. 下面本篇文章介绍一下 CSS 对于 < img > 图片的常见操作. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.

一, CSS 控制 img 图片的尺寸

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

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

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

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

二, 给 img 图片加边框

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

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

代码实例如下:

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

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

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

三, img 图片作为链接

图片作为链接, 也就是将其置于 < a > 之内.

代码实例如下:

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

>

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

需要特别注意的是, 将图片放入链接之中, 图片可能会出现不必要的边框, 添加 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

}

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

更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!

来源: http://www.css88.com/qa/css3/17660.html