【问题标题】:bootstrap carousel image dimensions引导轮播图像尺寸
【发布时间】:2016-03-23 19:04:58
【问题描述】:

我对放置在轮播中的图像尺寸有疑问。我加载的任何图像(具有不同尺寸 px)我都会得到一个在整个旋转宽度上拉长的图像,并且与原始图像不成比例。 我应该如何修复 CSS ?我可以将图像放置在轮播的中心而不将其延长到左/右边界吗?这是我的 CSS:

.carousel {
  height: 500px;
  margin-bottom: 10px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 100;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #FFF;
}
.carousel-inner > .item > img {
  position: center;
  top: 0;
  left: 10;
  min-width: 100%;
  height: 500px;
}

【问题讨论】:

  • 我在我的页面和“项目”部分使用轮播:<div class="carousel-inner" role="listbox" style='height:450px;'> <div class="item col-lg-10 col-lg-offset-1 active" style="height:440px;">...</div> <div class="item col-lg-10 col-lg-offset-1" style="height:440px;">...</div> 用于将项目 div 定位在中心并控制宽度,一切正常。
  • 这个问题可能会有所帮助:stackoverflow.com/questions/19481334/…

标签: css twitter-bootstrap carousel


【解决方案1】:

解决方案是将 css 代码放入您的 css 文件中

.carousel-inner > .item > img {
    margin: 0 auto;
}

【讨论】:

    猜你喜欢
    • 2023-03-08
    • 1970-01-01
    • 2014-05-25
    • 2020-03-06
    • 2016-07-15
    • 1970-01-01
    • 2019-06-21
    • 2016-05-15
    • 1970-01-01
    相关资源
    最近更新 更多