如何在bootstrap轮播中保持图像宽高比

Question

我正在尝试使用bootstrap carousel并从示例开始，如下所示：http://getbootstrap.com/examples/carousel/

我已将测试jpg（1200x480）加载到幻灯片中，但是当您调整浏览器大小时，图像会在水平方向上缩短，同时保持垂直尺寸会导致图像变得越来越扭曲，因为浏览器会变小。

我搜索过并发现其他人有同样的问题或类似问题，但没有人提出任何实际有用的内容。

有没有人有一个解决方案来保持bootstrap轮播中jpg的图像宽高比？

Answer 1

您可以使用css调整旋转木马的高度。这对我有用：

@media (max-width: 767px) {
    .carousel .item {
        height: 300px;
    }
}

你可以使用@media来获取windowsize并使用以下方法为每个宽度设置cssrules：

@media (max-width: 500px) { }

@media (min-width: 501px) and (max-width: 1000px) { }

@media (min-width: 1001px) { }

也许您必须将它用于图像尺寸。