twitter-bootstrap - Bootstrap 3中具有最小高度和自动裁剪的响应式全宽轮播

Question

为了在 Bootstrap 3 中创建一个全宽轮播，我直接将它放在一行中，没有包装容器。轮播完美地伸展到全屏宽度并缩放到手机格式。但问题是：因为轮播有 100% 的宽度，所以轮播在手机上缩放太多（320 px 宽度）：这在技术上是正确的，但如果高度更高就更好了。

问题：如何设置最小高度，保持图像的纵横比并在该最小宽度上左右裁剪？

score 3 · Accepted Answer

我将 carousel-inner 设置为比屏幕宽且边距为负。这使得旋转木马溢出并显得更高更窄，有效地裁剪左右。在较大的屏幕上，我将其设置回正常以显示完整图像。最后，小心你有溢出：隐藏；在正确的父元素上，以便移动用户不会遇到意外的横向滚动。

.carousel-inner{
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px){
  .carousel-inner{
    width: 100%;
    margin: 0;
  }
}

score 1 · Accepted Answer

您的 img 宽度为 100%，当它缩放宽度时它缩放高度，您可以使用 .carousel-inner > .item > a > img {max-width:200%} 和媒体查询来解决这个问题

2 回答 2