• 技术文章 >web前端 >前端问答

    img元素可以用css吗

    藏色散人藏色散人2021-01-11 09:26:05原创341

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

    本教程操作环境: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图片作为链接

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

    代码实例如下:

    <!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>

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

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:img css
    上一篇:css class是什么意思 下一篇:css设置不了中文字体怎么办
    线上培训班

    相关文章推荐

    • 如何复制css代码• css如何设置图片平移• html5 css 需不需要js• css怎么让连续数字字母换行• css class是什么意思

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网