div如何设置图片充满

 时间:2026-04-24 06:26:49

1、创建如下结构的测试模型

-- Images             (用于存放图片的文件夹)

-- Default.html     (用于书写测试代码)

div如何设置图片充满

2、打开PPT,创建两个填充色的背景框,并截图用于测试

div如何设置图片充满

div如何设置图片充满

3、在页面添加测试代码,用于显示上一步截出的一大一小图片。从运行效果看到,图片默认并不会充满DIV

div如何设置图片充满

div如何设置图片充满

4、【方式一】给页面的两个DIV设置高度,并设置DIV内部图片标签的长、宽都为100%

div如何设置图片充满

5、【方式一运行效果】图片充满了DIV,如果图片比DIV小,则会拉伸图片

div如何设置图片充满

6、【方式二】在页面增加一个DIV,并设置这个DIV的background相关样式

1)background-image:用于加载图片

2)background-repeat:设置是否重复显示图片

3)background-size:背景图的大小

4)-moz-background-size:兼容Firefox浏览器

div如何设置图片充满

7、【方式二运行效果】图片以背景的方式伸缩填满DIV

div如何设置图片充满

  • 怎么让div居中
  • 如何让图片在div中居中显示
  • css如何让div内的文字居中对齐
  • 网页设计HTML中如何插入背景图片
  • 怎么让两个div在同一行
  • 热门搜索
    羊蝎子的做法 儒怎么读 邓禄普轮胎怎么样 日本豆腐的做法大全 静脉曲张怎么治疗最好 鳗鱼的做法 丝瓜的做法大全家常菜 烧茄子的家常做法视频 肺炎是怎么引起的 第一章奶好涨怎么办徐蓉蓉