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

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

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色？
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
css 鼠标悬浮样式_【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
frontpage怎么设置html5,怎么在Frontpage中运用css设置网页字体
在Frontpage2000下,选择菜单"格式/样式",会弹出一个定义样式的窗口,在CSS列表下拉菜单(位于左下)中,选"所有的HTML标记", 这时在左边的列 ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
html设置一段文字颜色,用span css设置div内部分字体颜色
用span标签设置div内放一段文字中的一小部分文字字体色采方式. 一段笔墨放在DIV内或P内,当咱们配置div或p设置字体色彩,内里全体笔墨的字体色调就会变成咱们所配置字体色彩.通常会结构一段翰墨中 ...
设置html除了楷体还有什么字体,css设置各种中文字体如雅黑、黑体、宋体、楷体等等...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼常用标签头信息标签列表标签 . . 无序列表标签属性type的取值范围: disc:实心圆(默认) circle:空心圆 square:实心方块有 ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
HTML5常用的文本标签及css字体样式属性
HTML5常用的文本标签标签描述标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...
html 边框终点圆点,CSS设置虚线或虚边框dashed border
在网页前端设计过程中,少不了要使用边框,这样页面整体好看一些.边框通常分为两种,一种为实边框另一种为虚边框,实边框用得多一些,但有虚线或虚线边框点缀,网页会更漂亮,所以这两种边框都要使用. 在CSS中 ...

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

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

最新文章

热门文章