Question

<!-- START OF FIRST LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
      <div class="thumbnail">
        <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" data-toggle="modal" data-target="#firstModal">
        <!-- Modal -->
        <div class="modal fade" id="firstModal" role="dialog">
          <div class="modal-dialog">

        <!-- Modal content-->
        <div id="ffl" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="ffl" data-slide-to="0" class="active"></li>
            <li data-target="ffl" data-slide-to="1"></li>
            <li data-target="ffl" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
            </div>

            <div class="item">
              <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
            </div>

            <div class="item">
              <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#ffl" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#ffl" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>

      </div>
    </div>

    <div class="caption">
      <p>THUMBNAIL TEXT</p>
    </div>
  </div>
</div>
<!-- END OF FIRST LITTER GALLERY-->

<!-- START OF SECOND LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
  <div class="thumbnail flexbox">
    <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" data-toggle="modal" data-target="#secondModal">
    <!-- Modal -->
    <div class="modal fade" id="secondModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div id="sfl" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="sfl" data-slide-to="0" class="active"></li>
            <li data-target="sfl" data-slide-to="1"></li>
            <li data-target="sfl" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
            </div>

            <div class="item">
              <img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
            </div>

            <div class="item">
              <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#sfl" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#sfl" data-slide="next">
             <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>

      </div>
    </div>

    <div class="caption">
      <p>THUMBNAIL TEXT</p>
    </div>
  </div>
</div>
<!-- END OF SECOND LITTER GALLERY-->

这是我创建的一个例子。

我创建了我的第一个带引导程序的网站，我想让它看起来尽可能好，所以现在我找到了一些无法帮助的东西。

麻烦的是，即使分辨率不同，我也希望缩略图内的图像尺寸相同。我使用了max / min-width / height但这并没有解决问题。尝试溢出但在那种情况下我的标题是在图像下。

我在寻找：

如果图像尺寸不合适，我希望此图像居中，图像的其余部分溢出标题和缩略图。另外如何以模态窗口原始大小制作我的图像。

This is the page that I have created so it may help to understand my problem

Answer 1

有几种方法可以做到这一点。

最快的方法是改变css

 .thumbnail img {
     display: flex; /*remove this*/
     float: left; /*remove this*/
     margin-left: 50%; /*added this*/
     transform: translateX(-50%); /*added this*/
 }

如何在引导程序中使用不同分辨率使缩略图图像大小相同

1 个答案: