Question

请你看一下这个link，让我知道我在这里做错了什么，这使得图像尺寸比只有iPad横向（col-md- *）尺寸的边框短！正如您所看到的，我几乎拥有所有设备的完美尺寸，但在ipad横向视图中！

我在计算图像尺寸时有什么不妥吗？我必须修理它吗？我的网格设置有什么问题？

再次测试Screnfly图像在所有设备上看起来都不错，直到12“和10”Notepad和iPad格局。（当然问题可能会持续到所有较小尺寸的设备，但由于我隐藏了信息框，所以这里不清楚！？ enter image description here 这是我正在使用的代码

<div class="well banbox">
    <div class="row">
      <div class="col-lg-9 col-md-9 col-xs-12 banpic">
      <div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src=" http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 1
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 2
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>



      </div>
  <div class="col-md-3 hidden-sm hidden-xs baninfo">
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst1">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Our Programs</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr1"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst2">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Safe Stay Space</h4>
                    <h6>Ministry of Health</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr2"></span>
                </div>
            </div>
        </li>
    </ul>
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst3">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">About Us</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr3"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst4">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Take a Tuor</h4>
                    <h6>Visit Our Daycare online</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr4"></span>
                </div>
            </div>
        </li>
    </ul>

  </div>

     </div>

      </div>

Answer 1

您的问题是，图片的特定比例导致图片不够高，无法填充所放置的区域。

您的图像比率= 900/398 = 2.26 转盘比率lg = 848/375 = 2.26 转盘比md = 698/353 = 1.97

因此，图像太矩形，无法从高度角度填充空间。

不幸的是，我不知道有什么方法可以解决这个问题而不会让图像看起来很糟糕。您可能需要使用javascript对其进行拉伸以适应，或者指定行的高度并使用overflow:hidden剪辑它。

第三个选项是使图像成为col-md的正确高度，让col-lg人受到影响，图像高于右边的导航。这是我要采用的解决方案。

Answer 2

你也可以在Photoshop或类似的东西中调整图像大小。那么你的所有图像都可以使用相同的分辨率，你就不会遇到任何这些麻烦。

Answer 3

我花了很长时间试图弄清楚这个。添加宽度和高度属性似乎对我有用。图像完全没有扭曲。

    <div id="myCarousel" class="carousel slide" style="width: 1440px; height:800px; margin: 0 auto">

祝你好运

关于在Bootstrap 3上调整轮播图像大小的问题

3 个答案: