Question

要在Bootstrap 3中创建一个全宽度的轮播，我将它直接放在一行，没有包装容器。旋转木马完美延伸至全屏宽度，并可扩展至手机格式。但问题是：由于旋转木马的宽度为100％，旋转木马在手机上缩放太多（320像素宽度）：技术上是正确的，但如果高度较高则会很好。

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

Answer 1

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

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

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

Answer 2

你的img宽度是100％，当它缩放它的比例高度时，你可以用它来解决这个问题 .carousel-inner＆gt; .item＆gt; a＆gt; img {max-width：200％}和媒体查询