Question

如何在调整浏览器大小或至少确定最小宽度时禁用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;
}

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

禁用自动调整Bootstrap轮播图像的大小

1 个答案: