我正在使用instagrams API并抓取图片和一些内容并将它们放入缩略图中。这个结果唯一的疼痛是因为内容可能太大而导致一些缩略图被推出
这是一个例子
如何制作一些缩小的缩略图?看起来交错的最终结果对我很好(艺术效果)。这是我的代码。我正在使用把手,因为我正在使用MEAN堆栈
<body align="center">
<h1>
<p>Hello {{user.username}}!</p>
</h1>
<h2>
<p>Photos from your feed:</p>
</h2>
<div class="jumbotron">
<div class="row">
{{#each photos}}
<div class="col-sm-6 col-md-4 col-xs-4" style="text-align:center">
<div class="thumbnail">
<img src="{{url}}" class="img-responsive" class="img hashtag-img"><br>
<div class="caption" style="text-align:left">
<p> {{caption.text}} </p><br>
<p>Likes: {{likes.count}}
<form id="like" role="form" method="post" action="/like">
<input type="hidden" name="link" value="{{link}}">
<button type="submit" class="btn btn-primary">Like</button>
</form>
<a href="/unlike" class="btn btn-warning" role="button" align="center">Unlike</a>
</p>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</body>
答案 0 :(得分:0)
我认为您应该使用Jquery Grid-A-Licious
插件来执行此操作。因为Grid-A-Licious根据宽度和高度自动放置对象。以下是Grid-A-Licious http://suprb.com/apps/gridalicious/的链接,请查看此内容。
例如
$("#example1").gridalicious({
width: 50
});
其中width是缩略图的宽度。