CSS的拉伸图片填满盒子是一种常见的页面布局技巧,它可以让图片完全覆盖指定的盒子,并随着窗口大小的变化自适应调整大小。下面我们就来看一下如何实现这一功能。
.box{position:relative;width:800px;height:400px;overflow:hidden;}.box img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}以上代码中,我们首先定义了一个容器盒子.box,它的宽度为800px,高度为400px。为了让图片不会超出盒子范围,我们将盒子的overflow属性设置为hidden。
接下来,我们给盒子中的图片添加了一个绝对定位,并把它的top和left值设置为0,这样它就不会有任何偏移。为了让图片完全填充盒子,我们让它的宽度和高度都为100%。而为了让图片能够按比例拉伸,我们使用了CSS3的object-fit属性,将其值设为cover。
通过以上代码,我们就可以实现拉伸图片填满盒子的效果了。
上一篇:JavaScript中列表键如何定义
下一篇:css按下鼠标时









