首页 文章

如何将bootstrap 3.0 carousel项目赋予auto的高度

提问于
浏览 次
2

我试图让bootstrap carousel中的图像在高度优先，宽度为秒时响应 . 这是因为我要添加到旋转木马的图像大部分都是高于宽度的高度，尽管我应该将css写在看起来相同的位置，而不管图像尺寸如何 .

我在我的样式上覆盖了类而不是修改引导样式表，因为我更喜欢使用CDN加载引导程序 .

我正在为我的风格添加的课程是

.carousel-inner > .item > img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    max-width: 100%;
}

高度：自动和最大宽度：100％效果很好 . 我遇到的问题是.carousel .item的高度为500px . bootstrap.css第49行 .

.carousel .item {
    height: 500px;
    background-color: #777;
}

我不能给上面显示的类高度为auto，因为图像不可见 . 如果我这样离开，高度超过500px的图像会被切断，图像变小会使旋转木马看起来不成比例 .

任何有关这方面的帮助将不胜感激 . 提前致谢 .

twitter-bootstrap-3 carousel

1 回答

  • 1

    这似乎有效 .

    我将旋转木马放在旋转木马容器div中，并将以下内容添加到我的css中：

    .carousel, .carousel-inner > .item {
  display: run-in;
  width: 100%;
  height: auto!important;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}

.carousel-container {
    margin-left:0;
}
    回复于

相关问题