绝对中心(垂直和水平)"Responsive" 它不起作用
Absolute Center (Vertical & Horizontal) "Responsive" it does not work
我正在使用 Bootstrap 3.3.5 和演示 30-lazy-load-images,问题是容器不能有固定的高度(px),它必须是“100% 或auto" 使其与响应式设计兼容。
勾选这个Demo
.swiper-container {
width: 100%;
height: 500px; // Only work if star height eg 500px, but need this container responsive 100% or auto.
}
如果设置高度:100% 或自动,.swiper-container 高度不会初始化为“0”。我们如何解决这个问题?图像必须像延迟加载一样居中
您可以使用 height:50vh; 让滑动条容器显示屏幕高度的一半。或者任何你想设置的高度。
然后这将是响应式的。
.swiper-container {
width: 100%;
height: 50vh;
}
这里是Fiddle。
有关使用 vh 的更多信息 please read this.
我正在使用 Bootstrap 3.3.5 和演示 30-lazy-load-images,问题是容器不能有固定的高度(px),它必须是“100% 或auto" 使其与响应式设计兼容。
勾选这个Demo
.swiper-container {
width: 100%;
height: 500px; // Only work if star height eg 500px, but need this container responsive 100% or auto.
}
如果设置高度:100% 或自动,.swiper-container 高度不会初始化为“0”。我们如何解决这个问题?图像必须像延迟加载一样居中
您可以使用 height:50vh; 让滑动条容器显示屏幕高度的一半。或者任何你想设置的高度。
然后这将是响应式的。
.swiper-container {
width: 100%;
height: 50vh;
}
这里是Fiddle。
有关使用 vh 的更多信息 please read this.