求助老师图片自适应的问题.
来源：6-4 编写呼吸轮播特效
宋帅林
2020-10-23 13:10:51
# 具体遇到的问题
这两天自己做练习遇到一个肯苦恼的问题.
请老师帮助给出一个图片 宽度100% 多个li绝对定位撑不起来盒子的问题 的解决代码.
我目前HTML的结构是
div>ul>li>img
其实就是一个标准的banner轮播结构
我想让图片的大小随着浏览器的尺寸改变宽度
所以设置图片宽度为100% 并没有设置高度
然后将图片的li标签设置为绝对定位.并且全部重合在一起. 父标签ul 设置绝对定位
js想通过setInterval来改变每个图片的透明度(这个不用讲解. 我自己会制作)
但是出现了一个比较让我头疼的问题.就是 最外部的div盒子没有BFC规范. 直接无法撑起来导致我网页后边的东西都堆过来了. 请问老师. 我这个问题是不是图片没有设置尺寸的问题导致的. 如果图片必须要设置尺寸.
那如何做到 所有图片绝对定位重叠到一起.并且还能自动适应网页宽度呢. 请老师贴一份代码. 我自己研究也可以 .
写回答
1回答
-
同学你好，设置绝对定位的元素，会脱离文档流，撑不开父级的高度。如果想要解决这个问题，可以给外层盒子设置一个固定的高度，但是这样其他地方的布局可能会受到影响。建有：可以使用padding-bottom的方式。老师写了个小例子，同学可以参考一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } div { width: 100%; /*图片的高度/宽度之后，乘以100得到的值 */ padding-bottom: 41%; /* 其子元素相对于div定位 */ position: relative; } ul { /* 四个方向都为0，可以占满父元素的宽高 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } img { width: 100%; } li { /* 四个方向都为0，可以占满父元素的宽高 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> 888 <div> <ul> <li> <img src="https://img.mukewang.com/5f8cf95c0001dfa918720764.jpg" alt=""> </li> <li> <img src="https://img.mukewang.com/5f8cf95c0001dfa918720764.jpg" alt=""> </li> </ul> </div> <p>111</p> </body> </html>1
相似问题