Question

我正在尝试我的第一个响应式设计，并实施了Twitter Boostrap 3.我有一个方面，我想展示一个包含图像和信息的文章。

我创建了一个面板，在面板内部，左侧有一个主图像和缩略图，鼠标悬停效果替换主图像，右侧是信息框。低于768，两个盒子将相互移动。可以上传图像，这意味着它们可以具有不同的尺寸。

我想要一个固定的高度为主图像框（#main-image-container），否则当我使用鼠标悬停效果时，我会有一个恒定的跳跃。当然我也想保持宽高比。主图像框的最大宽度应为左列的最大列宽，而不与右侧的信息框重叠，缩略图框（＃拇指容器）的最大宽度应与#main-相同图像容器。

看起来我已经设法让它在风景图像上以＆lt; 1200以及530左右的速度工作。在1199以上，我的图片宽度与信息框重叠，在530以下，图像宽度不再变小。我试图解决这个问题一个星期，但找不到解决方案。我在这做错了什么？我希望每个人都理解我的问题，下面的源代码有帮助。

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">title</h3>
</div>

<div class="panel-body">

    <!-- Left Column of Advert -->
        <div class="col-md-7 col-sm-7 item_gallery" id="gallery">

            <div id="main-image-container" class="text-center">
                <div class="main-img-box">
                   <img src="/uploads/tmp/mainimage.jpg" class="img-responsive" id="main-img" width="400">
                </div>
            </div>
        <div id="thumb-container">
          <div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
              <img src="/uploads/tmp/thumb/thumbimage1.jpg" class="thumbnails">
          </div>
          <div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
              <img src="/uploads/tmp/thumb/thumbimage2.jpg" class="thumbnails">
          </div>
          <div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
              <img src="/uploads/tmp/thumb/thumbimage3.jpg" class="thumbnails">
          </div>
          <div class="col-md-3 col-sm-3 col-xs-3 thumb-img-box">
              <img src="/uploads/tmp/thumb/thumbimage4.jpg" class="thumbnails">
          </div>
        </div>
    </div>
    <!-- Right Column -->

    <div class="col-md-5 col-sm-5">
           Here is a Bookmark Link
           <div class="panel panel-info">
                <div class="panel-heading"><strong><span style="font-size:16px;&quot;">
                  Some Information
                </div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li>lots of infos</li>
                        <li>more infos</li>
                    </ul>    
                </div>
           </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h4>Description</h4>
        </div>
    </div>
  </div>
</div>

CSS

 #main-image-container{
    border: 1px solid #ccc;
    width: 90%;
    max-width: 90%;
    height: 452px;
    margin-bottom: 35px;
    margin-top: 40px;
    display: table;
}

.main-img-box{
  display: table-cell;
  vertical-align: middle;
  float: none;
  width: 90%;
  max-width: 90%;
  height: 452px; 
}

// below is new
#main-img{
  max-height: 450px; 
}

#thumb-container{
  max-width: 100%;
  border: 1px solid #ccc; 
  margin-bottom: 30px;
  display: table;
}

.thumb-img-box{
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding: 0 10px 0 10px;
}

@media (max-width: 1199px) {

  #main-image-container{
    width: 100%;
    height: 452px;
  }

  .main-img-box{
    max-width: 100%;
    height: 452px; 
  }

  #main-img{
    max-height: 452px;
    max-width: 100%;
  }

  #thumb-container{
    height:100px;
  }

  .thumbnails { 
    margin:0;
    padding:0;
  }

  img {
    width: 100%;
  }
}

@media (max-width: 767px) {
   #main-image-container{
    width: 100%;
    height: 352px;
  }

  .main-img-box{
    width: auto;
    max-width: 100%;
    height: 352px; 
  }

  #main-img{
    max-height: 352px;
    width: auto;
    max-width: 100%;
  }

  #thumb-container{
    max-height:100px;
    width: 100%;
  }

  img{
    width: 100%;
  }

Answer 1

您好在bootstrap中需要将显示设置为内联块，然后只有图像才会响应。

    img
    {
        display:inline-block;
        width:100%;
    }

Twitter Boostrap 3个不同大小的图像没有重新调整大小正确并重叠另一列

1 个答案: