禁用引导轮播图像的自动调整大小答案

【问题标题】：Disable auto resize of Bootstrap carousel images禁用引导轮播图像的自动调整大小
【发布时间】：2016-12-11 22:04:24
【问题描述】：

如何在调整浏览器大小或至少建立最小宽度时禁用 carousel 的大小调整？

例如here 如果我将窗口大小调整为200x600 px，则轮播图像几乎不可见，并且它们会在轮播下方生成一个空白空间。

我想要的是类似于hostel world website 的东西，即使我调整窗口大小，轮播图像也不会“挤压”。

我试图给.carousel 和.item min-width, width 等，但它不尊重任何东西。

.item {
     //height: 100%;
    //width: 100%;
    //height: 640px;
    //width: 640px;
    //height: 100vh;
    min-width: 500px;
    overflow: hidden;

}

.carousel {
    //min-height: 640px;
    min-width: 500px;
    overflow: hidden;
    //width: 100%;
    //height: 100%;
    //height: 640px;
    //width: 640px;
}

【问题讨论】：

标签： css twitter-bootstrap bootstrap-carousel

【解决方案1】：

我用这个：

/* Carousel img stop resizing
 * image proportion 1920 x 1280
 */
@media screen and (max-width: 450px){
  .carousel-inner>.item>a>img,
  .carousel-inner>.item>img {
    max-width: 450px;
    height: 300px;
    overflow: hidden; 
  }
}

您当然可以建立任何断点和比例...它会在 450 像素处停止调整大小并将图像固定在屏幕右侧...

要在停止调整大小时保持图像居中，请添加以下 css：

@media screen and (max-width: 450px){
  .carousel-inner>.item>a>img,
  .carousel-inner>.item>img {
    ...
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

【讨论】：