html - 动态图像包装器的固定大小

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 文件会更可行。

主题在预览中看起来不错，但是当缩略图大小不同时，主题开始有点破损。

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

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

据我所知，图像被包裹在 <figure> 中元素(不确定是否有必要，也许 div 也可以)。

我一直在寻找一种方法，让这个包装器可以有一个恒定的高度(以 % 为单位)，图像以最好的方式适合它，并 overflow hidden 。

到目前为止，我已经尝试使用 flex 模型 display:table 的组合，将 100% 的高度添加到所有父元素和祖父元素(我听说只有在父元素明确指定高度时才适用 % 的高度)但是似乎没有任何效果。始终表现得好像他们将高度设置为自动。

我正在考虑将整个事情分开并进行新的尝试，但是在开始所有我真正需要知道的事情之前，我需要知道是否有一种方法可以仅使用 CSS 来完成，或者我是否遗漏了什么。

希望我说得足够清楚了。

Answer 1

对于 3 列部分，为什么不设置 <figure>到特定高度，并且overflow: hidden;然后对于图像，执行如下操作:

width: 100% !important;
position: absolute;
top: 50%;
transform: translateY(-50%);

对于其他问题，您要设置<article>和直接 child a和 <figure>里面就是display: flex; .这将为您带来“100% 高度”效果。