css如何使图片缩小

百变鹏仔 3个月前 (09-20) #CSS

文章标签图片

方法：1、利用width和height属性使图片缩小，语法“图片对象{width:宽度;height:高度;}”；2、利用“background-size”属性使图片缩小，语法“图片对象{background-size:宽度高度;}”。

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

css如何使图片缩小

1、在css中，我们可以通过width和height属性设置图片的高和宽来设置图片大小，来达到图片缩小的目的。

下面我们通过示例来看一下，示例如下：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style>            .img{                width: 200px;                height: 100px;            }        </style>    </head>    <body>        <p><strong>原始图片大小</strong></p>         <div>@@##@@<br>     </div>         <br />        <p><strong>通过CSS使图片缩小</strong></p>         <div>            @@##@@<br>         </div>            </body></html>

输出结果：

2、在css中可以利用background-size属性来实现图片缩小，下面我们通过示例来看一下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style>            div{                width: 400px;                height: 320px;            }            .box1{                background:url(1118.02.png) no-repeat;            }            .box2{                background:url(1118.02.png) no-repeat;                background-size: 200px 160px;                            }        </style>    </head>    <body>        <p><strong>原始图片大小</strong></p>         <div class="box1"></div>         <br />        <p><strong>通过CSS缩小背景图片</strong></p>         <div class="box2"></div>    </body></html>

输出结果：

（学习视频分享：css视频教程）

文章推荐

css如何使图片缩小

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写