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

Question

我正在使用这个 wordpress template on 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>

我也会 post css，但考虑到类的数量和 CSS 的大小，我认为对主题的 [=44] =] 文件会更可行。

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

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

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

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

我一直在寻找一种方法，让这个包装器可以有一个恒定的高度（以 % 为单位），图像以最好的方式适合它，隐藏溢出。

到目前为止，我已经尝试使用 flex 模型的组合，display:table，将 100% 的高度添加到所有父元素和祖父元素（我听说 % 中的高度仅适用于父元素具有高度的情况明确指定）但似乎没有任何效果。他们的行为总是像他们将高度设置为自动一样。

我正在考虑将整个事情分开并进行新的尝试，但是在进入所有我真正需要知道的事情之前，是否有办法只用 CSS 来完成它，或者如果我'我遗漏了一些东西。

希望我说得够清楚了。

Answer 1

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

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

对于其他问题，您想将 <article> 和其中的直接子项 a 和 <figure> 设置为 display: flex;。这将使您获得“100% 高度”效果。

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

Fixed size for dynamic image wrapper

html

css

wordpress

wordpress-theming