jgozal jgozal - 2 months ago 6
CSS Question

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.

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