Question

网页中控制图片缩放比例_html设置图片按比例缩放

Answer 1

可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px*200px这表示把背景图片大小调整为宽度950像素，高度200像素。

1、background-size的语法说明：

(1)属性名:background-size

(2)属性值:其中bg-size=[||auto]{1,2}|cover|

contain

(3)初始值:autoauto

(4)应用于:所有元素

(5)继承性:无

(6)百分比:后面会说明

(7)计算值:根据指定

2、代码说明：

/*一个值:这个值指定图片宽度，第二个值为auto*/

background-size:auto

background-size:50%

background-size:3em

background-size:12px

/*两个值:第一个值指定图片的宽度，第二个值指定图片的高度*/

background-size:50%auto

background-size:3em25%

background-size:auto6px

background-size:autoauto

/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。*/

background-size:auto,auto/*请区别于background-size:autoauto*/

background-size:50%,25%,25%

background-size:6px,auto,contain

background-size:inherit

扩展资料：

背景重复：

如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。

属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

背景图像将从一个元素的左上角开始。如下：

body

{

background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;

}

背景定位：

可以利用background-position属性改变图像在背景中的位置。

下面的例子在body元素中将一个背景图像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;background-position:center;

}

为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。