css - 禁用引导轮播图像的自动调整大小

Question

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

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

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

我试图给予.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;
}

Answer 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%);
  }
}