随机图像之间出现间隙答案

【问题标题】：Gaps appearing between randomized images随机图像之间出现间隙
【发布时间】：2014-12-17 10:13:10
【问题描述】：

我编辑了一个 Bootstrap Wordpress 主题，以便在首页刷新时随机显示特色图片。但是现在在每隔一行上，图像都显示出巨大的间隙而不是图像 -

我做错了什么，我该如何消除这些差距？我在 index.php 中使用了这段代码来随机显示图像 -

        <?php /* Start the Loop */ ?>
        *<?php query_posts($query_string . '&orderby=rand') ?>*
        <?php while ( have_posts() ) : the_post(); ?>

【问题讨论】：

标签： wordpress twitter-bootstrap

【解决方案1】：

问题的根源在于图像的高度不同。在您粘贴的屏幕顶部右侧的行中，右侧的图像没有其他两个图像那么高。所以浏览器认为它下面有内容的空间。它在那里添加一个图像，并尝试将其向左浮动。当它撞到某物时它会停止 - 上面行第二列中的图像。然后它停止。下一张图片被放在它下面。这正是float 在 CSS 中的工作方式。

所以你有两个选择。要么将所有图像（或它们的容器，比如articles）裁剪到相同的高度，要么使用 jQuery 库（如 masonry）来布置图像。

有关相关问题和更多讨论，请参阅this answer。

【讨论】：

请注意 Masonry 是 CPU 的杀手。如果您使用大量大图像，则在布局之前会滞后于许多用户
流浪汉，我将图像制作的高度相同，但我仍然遇到同样的问题......
我在您的网站上没有看到问题。你有什么机会缓存吗？如果它们的大小相同，@JosFaber 建议的解决方案应该可以工作 - 你可以试试

【解决方案2】：

不要在 .pbox css 中浮动。改用 display: inline-block 就好了。

在右下角查看屏幕截图和更新的 css：https://www.dropbox.com/s/3qvmhvz5dwlnekb/Screenshot%202014-04-16%2022.14.42.png

【讨论】：

+1。尽管考虑到它们的高度不同，这仍然会在图像之间留下间隙。
您可以让 Wordpress 在上传过程中呈现特定的图像格式。通过这种方式，您可以获得所有相同尺寸的图像。在codex.wordpress.org/Function_Reference/add_image_size 上检查“add_image_size”的法典
当然；我已经在许多网站上这样做了。只是说照片现在不是那样的。
如果你想保持不同的尺寸，那么我猜剩下的就是砌体了。请注意可能会降低性能。

【解决方案3】：

简而言之，间隙来自高度不等的浮动图像。您有两个选项可以在不编辑当前 HTML 标记的情况下解决此问题。

选项 1 添加新的图像大小，将该图像大小添加到 wp_query 并重新生成缩略图。

3 个步骤：

1) 通过将以下内容添加到 functions.php 来创建新的图像大小 add_image_size( 'home-thumbnail', 400, 400, true);

home-thumbnail = 大小可变，保持简单和简短

400, 400 = 高度，宽度

true = 硬裁剪，WP 将从中心裁剪图像。

http://codex.wordpress.org/Function_Reference/add_image_size

2) 将新的图像尺寸添加到 wp 查询中。

例如<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'home-thumbnail' ); } ?>

3) 使用此插件重新生成缩略图：http://wordpress.org/plugins/regenerate-thumbnails/

就是这样！

选项 2 在上传之前预先裁剪您的图像，使其大小相同。我推荐选择 1，因为这些步骤是任何开发工作流程的一部分，最终会增加您的开发灵活性/选项。

【讨论】：