2

你能看看这个链接，让我知道我在这里做错了什么，这使得图像尺寸比只有 iPad 横向（col-md-*）尺寸上的边框更短！如您所见，我几乎为所有设备提供了完美的尺寸，但在 ipad 横向视图上！

我在计算图像大小时做错了什么吗？我必须修复它吗？还是我的网格设置有问题？

再次在Screnfly上测试，图像在所有设备上看起来都不错，直到 12 英寸和 10 英寸记事本和 iPad 横向。（当然问题可能会继续出现在所有较小尺寸的设备上，但由于我已经隐藏了信息框，所以这里不清楚！？ 在此处输入图像描述 这是我正在使用的代码

<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>
4

3 回答 3

1

您的问题是您的图像的特定比例导致它不够高以填充它正在放置的区域。

你的图像比例 = 900/398 = 2.26 轮播比例 lg = 848/375 = 2.26 轮播比例 md = 698/353 = 1.97

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

不幸的是，我不知道有什么方法可以解决这个问题而不会使图像看起来很糟糕。您要么必须使用 javascript 将其拉伸以适应，要么指定行的高度并使用overflow:hidden.

第三种选择是将图像设置为 col-md 的正确高度，并让 col-lg 人因图像高于右侧的导航而受苦。这是我会采用的解决方案。

于 2013-10-07T13:32:44.990 回答
0

您还可以在 Photoshop 或类似的工具中调整图像的大小。这样，您的所有图像都可以具有相同的分辨率，并且您不会遇到任何这些麻烦。

于 2014-01-09T08:46:21.520 回答
0

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

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

祝你好运

于 2015-12-29T22:34:07.340 回答