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

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

Here is my site.

我做错了什么,我该如何消除这些差距?我在 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,因为这些步骤是任何开发工作流程的一部分,最终会增加您的开发灵活性/选项。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-03-29
      • 2011-12-01
      • 2018-12-02
      • 2012-02-10
      • 1970-01-01
      • 2012-06-18
      • 1970-01-01
      • 2017-04-18
      相关资源
      最近更新 更多