Twitter bootstrap Boostrap模板缩放图像滑块

就是这个模板

---

当调整浏览器大小或在移动设备上时，滑块的图像将被裁剪（左/右），下面的文本将消失。知道如何正确缩放吗？

旋转木马项目的高度设置为

高度：65vh

或

最小高度：300px

，以较大者为准。因此，当您开始缩小显示范围时，图像的纵横比将开始中断，因为视口的高度变化不大，这是决定因素

要在较小的设备上考虑纵横比，您应该添加“最大高度”属性，并将其设置为

56.25vw

（100乘以9除以16，因为图像的宽度始终是视口宽度的100），这样可以确保始终获得16:9的纵横比（假设站点与模板一样，始终使用1920x1080图像）

.carousel项目{
高度：65vh；
最小高度：300px；
最大高度：56.25vw；
/*其他东西*/
}

这样，您将确保在较小的屏幕上尊重纵横比，而在较大的显示器上则避免尊重纵横比，因为保持图像的纵横比会导致图像溢出到屏幕底部

我们仍然有

min height

属性，在

max height

之前，浏览器总是首选该属性，因此在非常小的屏幕上，它仍然会将我们的高度调整为300px。我们只需将其删除即可避免：

.carousel项目{
高度：65vh；
最大高度：56.25vw；
/*其他东西*/
}

如果我们想在所有屏幕上强制设置纵横比，我们应该删除

max height

属性，并将

height

属性设置为

56.25vw

：

.carousel项目{
身高：56.25vw；
/*其他东西*/
}

关于文本，如果要在较小的屏幕上显示，必须从

div.carousel-caption

元素中删除显示类（）

第二张幻灯片
这是第二张幻灯片的说明

它解决了30%的问题。它可以在手机上正常缩放，但我刚刚发现它以前也被裁剪过（上/下）。并且文本在手机视图中仍然不可见。您认为最好的解决方案是用新的滑块替换整个滑块。@dnkn如果您想让它即使在最小的屏幕上也尊重纵横比，只需删除

min height

attribute@dnkn刚刚编辑的答案解释说，它现在应该涵盖所有屏幕sizes@dnkn是的，上面和下面底部在较大的版本上被裁剪…如果您想始终保持16:9的纵横比，您可以完全删除

min-

和

max-

高度，并设置

height:56.25vw；

。这样，您的屏幕上将始终完全显示16:9的图像。@dnkn为了显示文本，您必须更改的类ode>.carousel captiondiv，我刚刚相应地更新了答案…如果答案有用，请接受并投票