Fixed size for dynamic image wrapper

Question

I'm using this wordpress template on this blog . There's a section with the following structure

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>

I'd post the css as well, but given the number of classes and size of the CSS I think refereeing to the theme's CSS file would be more feasible.

The theme looks fine in the preview, however when the thumbnail images vary in size the theme starts to break a little.

1. The three vertical columns start to vary in height
2. The images in the horizontal rows that follow don't go all the way to the end.

I know a quick fix is to standardize all the images, but I somehow feel there's a better way out.

From what I see, the images are wrapped in a <figure> element (not sure if this was necessary, maybe a div could also do).

I was looking for a way where this wrapper can have a constant height (in %) with the image fitting in the best possible way inside it with overflow hidden.

So far I've tried using combinations of the flex model, display:table, adding 100% heights to all parent and grandparent elements (as I heard height in % only applies if the parent element has a height explicitly specified) but nothing seems to work. The always behave like they have the height set to auto.

I'm considering ripping the whole thing apart and making a fresh attempt, however before getting into all that I really need know if there is a way to accomplish this with just CSS, or if I'm missing something.

I hope I have been clear enough.

Answer 1

for the 3 column part, why not set the <figure> to a specific height, and overflow: hidden; and then for the image, do something like:

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

For the other issues, you want to set <article> and the direct child a AND <figure> that's inside that to display: flex; . That'll get you the "100% height" effect.