这是我的代码:
<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的完整代码,以防它有用。
答案 0 :(得分:1)
Code is correct. In your image having the space for left and right. check your image.