Twitter bootstrap 3 如何创建全屏旋转木马/幻灯片放映？

我是网页设计的初学者。我正在尝试为网页的特定部分创建全屏旋转木马/幻灯片放映

更具体地说，我有这样一个旋转木马：

引导示例
旋转木马示例



洛杉矶
洛杉矶总是那么有趣

芝加哥
谢谢你，芝加哥

纽约
我们喜欢大苹果

我想将其转化为：

---

我该怎么做呢？

将宽度设置为100%，甚至可以设置固定高度以保持一致性

.carousel-inner img {
    width: 100%; /* Set width to 100% */
}

---

@媒体（最小宽度：576px）{
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
最大高度：340px；
}
}
@介质（最小宽度：768px）{
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
最大高度：720px；
}
}
@介质（最小宽度：992px）{
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
}
.旋转木马内部{
最大高度：580像素；
}
}
@介质（最小宽度：1200px）{
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
最大高度：700px；
}
.旋转木马内部{
最大高度：700px；
}
}

洛杉矶
洛杉矶总是那么有趣

纽约
谢谢你，纽约——一个我们永远不会忘记的夜晚

芝加哥
谢谢你，芝加哥

您在示例中使用的是Bootstrap 3，但将此问题标记为Bootstrap 4。给出了什么？很抱歉出错。添加bootstrap-3标记。否则没有人会发现你的问题。我已经添加了标签。谢谢。宽度现在是100%。然而，我面临着身高的问题。当我将“高度：80%；”包含在.carousel内部img中时，什么也没发生。我怎样才能降低图像的高度？@john，这应该使用媒体查询来完成。使用%将不会有用，因为它仅在引用某个对象时才起作用。我已经更新了答案，请检查，并将添加一个简短的解释很快。

.carousel-inner img {
    width: 100%; /* Set width to 100% */
}