Twitter Bootstrap：旋转木马图像的宽度和高度

6 回答

• -2

  对于Bootstrap 3，您只需要：

  .carousel img {
      min-width: 100%;
  }
  

  回复于 2024-04-29T04:59:20+08:00
• 7

  从引导站点上的示例轮播，如果您调整浏览器窗口的大小，您将看到图像实际上在x轴上被拉伸 . 要实现相同的效果，请使用他们的CSS：

  .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
  }
  

  最后两个属性，min-width和height，非常重要 . 高度设置为旋转木马的所需大小 .

  最后，您将需要使用img标记来放置图像，而不是背景图像 . 这是一个更全面的例子：

  <div class="item">
      <img src="image.jpg" />
      <div class="container">
          <div class="carousel-caption">
              <h1>Header</h1>
              <p class="lead">This is a caption</p>
              <a class="btn btn-large btn-primary" href="#">Large Button</a>
          </div>
      </div>
  </div>
  

  我希望这有帮助 . 干杯!

  回复于 2024-04-29T04:59:20+08:00
• 1

  想想我有一个简单的CSS更改解决方案？只需将以下内容从（OLD）更改为;

  .carousel {
    /*height: 500px; OLD*/
    /*margin-bottom: 60px; OLD*/
  
    /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
    margin:0 auto 60px;
  }
  
  .carousel .item {
      /*height: 500px; OLD*/
      /*background-color: #777; OLD*/
  
      width:100%;
      height:auto;
  }
  .carousel-inner > .item > img {
    /*position: absolute; OLD+WHY?*/
    /*top: 0; OLD+WHY?*/
    /*left: 0; OLD+WHY?*/
  
    min-width:100%;
    height:auto;
  }
  

  回复于 2024-04-29T04:59:20+08:00
• 1

  对于要在幻灯片中插入的每个图像，请使用以下内容：

  <img class="img-responsive center-block" src="#">
  

  回复于 2024-04-29T04:59:20+08:00
• 1

  虽然这可以追溯到3年前，但是当使用Bootstrap 3.3.7时，'Nate Beers'给出的解决方案解决了我的问题

  因为'max-width'设置当width大于max-width时覆盖width属性的元素的最大宽度 .

  'min-width'也总是覆盖'max-width' .

  这是codepen中的 an example ，调整预览窗口大小以查看其工作原理 .

  特别是通过调整到可能的最小宽度来检查下面的元素，并与其他2个元素i1和i2进行比较 .

  <div class="i3">Sample</div>
  

  回复于 2024-04-29T04:59:20+08:00
• 17

  您可以简单地将他们的CSS更改为此，但它会导致您的图像裁剪掉不适合的图像：

  .carousel-inner > .item > img {
     position: absolute;
     top: 0;
     left: 0;
     min-width: 100%;
     min-height: 500px; /* <--- Change this line to min-height */
   }
  

  回复于 2024-04-29T04:59:20+08:00