• 技术文章 >web前端 >css教程

    css中怎么设置图片大小

    青灯夜游青灯夜游2021-04-20 16:49:39原创19962

    在css中,可以使用width和height属性来设置图片大小;只需要给img图片元素设置“width:值;height:值;”样式即可。width和height属性可以设置元素内容区的宽度和高度,不包括填充、边框、或页边距。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以使用width和height属性来设置图片大小。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
      .a{
        width: 200px;
        height: 200px;
      }
      .b{
        width: 200px;
        height: 100px;
      }
      </style>
    </head>
    
    <body>
    <img src="img/1.jpg" alt="" class="a">
    <img src="img/1.jpg" alt="" class="b">
    </body>
    
    </html>

    效果图:

    1.png

    说明:

    width 属性设置元素的宽度,height 属性设置元素的高度。

    width 属性和height 属性定义元素内容区的宽度和高度,不包括填充,边框,或页边距;在内容区外面可以增加内边距、边框和外边距。

    属性值:

    描述
    auto默认。浏览器会计算出实际的高度。
    length使用 px、cm 等单位定义高度。
    %基于包含它的块级对象的百分比高度。
    inherit规定应该从父元素继承 height 属性的值。

    (学习视频分享:css视频教程

    以上就是css中怎么设置图片大小的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 图片大小
    上一篇:css如何实现阴影效果 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css3动画如何停止• css上下间距怎么调• css怎么设置超出自动换行• css如何设置边框透明
    1/1

    PHP中文网