在使用 BootStrap 轮播插件的时候遇到一个问题,因为图片的比例不同,轮播插件的高度会产生变化。

所以这里就需要解决一个问题,固定图片的比例并且能够自适应窗口大小。

用 js 实现的话会比较麻烦,这里提供一个纯 CSS 实现的方法。

这个方法利用的是图片会填充 padding 的部分。

父元素

1
2
3
4
5
6
div {
width: 100%;
height: 0;
padding-bottom: 50%;
overflow: hidden;
}

height 设为 0, 用 padding-bottom 代替 height ,这里的比例是 2:1 ,然后隐藏掉多余的部分。

子元素

1
2
3
img {
width: 100%;
}

不管窗口的大小怎么变,始终保持固定比例。