Question

我在wordpress template上使用此this blog。有一个部分具有以下结构

HTML

<article id="post-##" class="mh-loop-item mh-loop-list-item clearfix post-211 post type-post status-publish format-standard has-post-thumbnail hentry category-design">     
    <a class="mh-loop-thumb-link" href="URL">
       <figure class="mh-loop-thumb mh-loop-list-thumb">
            <img width="360" height="176" src="URL" class="attachment-tuto-medium size-tuto-medium wp-post-image" alt="AdvancedPowerPoint1" srcset="URLs" sizes="(max-width: 360px) 100vw, 360px" />
       </figure>
    </a>    

Some more Content
</article>

PHP

            <?php /* Loop Template used for large content on archives */ ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class('mh-loop-item mh-loop-large-item clearfix'); ?>><?php
            $format = get_post_format();
            if ($format === 'status' || $format === 'link' || $format === 'quote' || $format === 'chat') {
                tuto_post_icon_header();
            } else { ?>
                <a class="mh-loop-thumb-link block-a" href="<?php the_permalink(); ?>">
                    <figure class="mh-loop-thumb mh-loop-large-thumb"><?php
                        if (has_post_thumbnail()) {
                            the_post_thumbnail('tuto-content');
                        } else {
                            echo '<img class="mh-image-placeholder" src="' . get_template_directory_uri() . '/images/placeholder-content.png' . '" alt="' . esc_html__('No Image', 'tuto') . '" />';
                        } ?>
                    </figure>
                </a><?php
            } ?>
            <div class="mh-loop-content mh-loop-large-content clearfix">
                <div class="mh-loop-content-inner">
                    <header class="mh-loop-header mh-loop-large-header">
                        <h2 class="entry-title mh-loop-title mh-loop-large-title">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_title(); ?>
                            </a>
                        </h2>
                        <div class="mh-meta mh-loop-meta mh-loop-large-meta">
                            <?php tuto_loop_meta(); ?>
                        </div>
                    </header>
                    <div class="mh-loop-excerpt mh-loop-large-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </div>
            </div>
        </article>

我也会发布css，但考虑到CSS的类数和大小，我认为对主题的CSS文件进行裁判会更加可行。

主题在预览中看起来很好，但是当缩略图图像的大小不同时，主题开始有点突破。

三个垂直列的高度开始变化
后面水平行中的图像不会一直到最后。

我知道快速解决方法是标准化所有图像，但我觉得有更好的出路。

从我看到的，图像被包裹在<figure>元素中（不确定这是否必要，也许div也可以）。

我一直在寻找一种方法，这个包装器可以有一个恒定的高度（以％为单位），图像以最佳方式安装在其中，并隐藏溢出。

到目前为止，我已尝试使用flex模型的组合，display：table，为所有父元素和祖父元素添加100％的高度（因为我听说％中的高度仅适用于父元素明确指定的高度）但似乎没什么用。总是表现得像将高度设置为自动。

我正在考虑将整个事情分开并重新尝试，但是在进入所有我真正需要知道的事情之前，如果有一种方法可以用CSS实现这一点，或者我错过了什么。

我希望我已经足够清楚。

Answer 1

对于3列部分，为什么不将if(key_a.isPressed) { ... }设置为特定高度，然后为<figure>然后为图像执行以下操作：

overflow: hidden;

对于其他问题，您希望将width: 100% !important; position: absolute; top: 50%; transform: translateY(-50%);以及其中的直接子<article>和a设置为<figure>。这样可以让你获得100％的高度＆＃34;效果。

固定动态图像包装的大小

1 个答案: