css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法：

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */

background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

扩展资料：

CSS背景图片自适应、全屏、填充、拉伸

方法一：js控制

方法二：全浏览器兼容

.bg{  

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);  

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  

-moz-background-size:100% 100%;  

background-size:100% 100%;  

}

一、HTML标签内控制宽度高度

Img标签教程：

1、我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽；

2、我们可以直接在图片标签设置宽度width和高度height，这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位，默认为PX像素；

3、img标签内设置高度宽度优点直观，对于文章内插入图片可以利用此方法控制设置图片高度宽度；缺点，如果图片列表排版的这样会增加很多HTML代码，不便统一修改。

二、CSS样式控制width、height

语法：img{width:150px;height:60px}

这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位，这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。

如果是我们直接对img设置样式，这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式，我们通常在img前加上对象CSS命名。

假如我们要控制.divcss5内图片样式，那我们语法如下：

.divcss5 img{width:150px;height:60px} 

解释语法结构：对象选择器命名加一个空格然后输入img接着“{...}”构成控制指定对象内图片样式。

三、CSS设置IMG图片宽度和高度实例

1、CSS设置图片实例描述

我们在一个HTML中放图片，1张为原始大小图片，1张为通过CSS设置宽度和高度图片，通过2张图片对比分析通过CSS改变图片大小。

2、实例完整HTML+CSS代码如下：

原始图片大小

 本身这个图片宽度为165px高度60px

通过CSS改变设置图片大小

     
     这里设置divcss5盒子里图片宽度300px高度100px