[英]Floated thumbnail gallery, different sizes, how to handle?
When simply doing float:left to all thumbnails of the same size, a gallery looks great.当简单地对所有相同大小的缩略图执行浮动:向左时,画廊看起来很棒。 But when different size thumbnails come in to play, that is no longer the case.
但是当不同大小的缩略图开始播放时,情况就不再如此了。
What is the best way to handle different size thumbnails?处理不同尺寸缩略图的最佳方法是什么? Do I need to use tables instead?
我需要改用表格吗?
None of the possible CSS solutions look particularly good.没有一个可能的 CSS 解决方案看起来特别好。
I recommend using JavaScript+jQuery instead, specifically one of these plugins:我建议改用 JavaScript+jQuery,特别是以下插件之一:
I think the best solution is to give each thumbnail a div container with a fixed size, so that every thumbnail takes the same space.我认为最好的解决方案是给每个缩略图一个固定大小的 div 容器,以便每个缩略图占用相同的空间。 I mean, don't resize your thumbnails.
我的意思是,不要调整缩略图的大小。 The picture in the div should be centered.
div 中的图片应该居中。
I have used following plugin, it's working fine:我使用了以下插件,它工作正常:
http://suprb.com/apps/gridalicious/ http://suprb.com/apps/gridalicious/
For those in 2017 looking for a gallery for different sized images, check this css-tricks article: https://css-tricks.com/seamless-responsive-photo-grid/对于那些在 2017 年寻找不同尺寸图像的画廊的人,请查看这篇 css-tricks 文章: https://css-tricks.com/seamless-responsive-photo-grid/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.