html背景图片如何自适应大小？

html-css09

html背景图片如何自适应大小？,第1张

利用float+margin实现

.left{width：100pxfloat:left}

.center{float:leftwidth:100%margin-right:-200px}

.right{width:100pxfloat:right}

利用table实现

.parent{width:100%display:tabletable-layout:fixed}

.left,.center,.right{display:table-cell}

.left{width:100px}

.right{width:100px}

利用flex实现

.parent{display:flex}

.left{width:100px}

.center{flex:1}

.right{width:100px}

1、首先打开hbuilder编辑器，新建一个html文件，里面设置一个div标签并设置div的固定宽度和高度。

2、然后在div里面插入一张图片，将图片的宽度设置为何父级一样的宽度，代码就是width:100%这里的100%会自动跟随父级的宽度。

3、接着将父级的高度去掉，这样父div中的img的高度就能自动化，还要将将图片设置为“display:block”转为块状就可以了。

4、最后打开浏览器就能看到一个铺满整个div的图片了。

可以使用html的style标签的width属性实现这种图片自动适应效果。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件。

2、在html文件中输入以下的html代码。

3、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

4、在浏览器中打开此html文件，可以看到最终想要实现的图片宽度自动适应浏览器效果。