无法在引导程序模板中调整图像大小

时间:2016-09-23 17:29:12

标签: html css twitter-bootstrap

这是我的代码:

<div class="row">
          <div class="col-lg-3 col-sm-4 col-xs-6">
            <a href="#" class="thumbnail">
              <img src="https://instagram.fphl1-1.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/14268970_1251518108241488_429863245_n.jpg?ig_cache_key=MTM0MTc4MTc5MzM1NTEwODY1NQ%3D%3D.2.l" class="img-responsive">
            </a>
          </div>
          <div class="col-lg-3 col-sm-4 col-xs-6">
            <a href="#" class="thumbnail">
              <img src="https://instagram.fphl1-1.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/14474249_890696994394344_5843789814981197824_n.jpg?ig_cache_key=MTM0NTY1MzIyMjgxMTAyOTk5MA%3D%3D.2.l" class="img-responsive">
            </a>
          </div>
          <div class="col-lg-3 col-sm-4 col-xs-6">
            <a href="#" class="thumbnail">
              <video autoplay loop muted>
                 <source src="https://instagram.fphl1-1.fna.fbcdn.net/t50.2886-16/14427920_909305109199530_1666974084291887104_n.mp4" type="video/mp4">
              </video>
            </a>
          </div>
</div>

<style>
      .thumbnail {
        margin-bottom: 7px;
      }
      video {
        width: 100%;
        height: 100%;
      }
       img {
        width: 100%;
        height: 100%;
      }
</style>

您也可以在JSFiddle here中尝试此操作。

我可以调整视频以适应容器的大小,但不能调整img(注意img容器中的空白区域)。我如何将img装入容器?模板here的完整代码,以防它有用。

1 个答案:

答案 0 :(得分:1)

Code is correct. In your image having the space for left and right. check your image.