CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jgozal
jgozal

Reputation: 1582

having trouble to resize images in bootstrap template

This is my code:

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

You can also try this in JSFiddle here.

I am able to adjust the video to fit to the size of the container, but not the img (notice the white space in the img containers). How can I fit the img to the container? Full code for template here, in case it helps.

Upvotes: 0

Views: 36

Answers (1)

Dhaarani
Dhaarani

Reputation: 1360

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

Upvotes: 1

Related Questions