動的イメージラッパーの固定サイズ

Question

this blogにwordpress templateを使用しています。

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> 

は私もCSSを投稿しますが、CSSのクラスの数とサイズを与えられたと思います

  <?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> 

PHP私が思う、次の構造審判のセクションがありますテーマのCSSファイルへのリンクはより実現可能です。

プレビューではテーマがうまく見えますが、サムネイル画像のサイズが異なると、テーマが少し崩れ始めます。

1. 3つの縦の列が続く水平方向の行の画像は、すべての道の端に行っていない高さ
2. に変わり始めます。

私はすべての画像を標準化することが簡単なことを知っていますが、どうやらより良い方法があると感じています。

私が見るところでは、画像は<figure>要素で包まれています（これが必要なのかどうかは分かりませんが、おそらくdivも​​可能です）。

私は、このラッパーがオーバーフローが隠された状態で画像のフィッティングが可能な限り最良の方法で一定の高さ（％）を持つ方法を探していました。

フレックスモデル、display：tableの組み合わせを使用してみましたが、100％の高さをすべての親要素と祖父要素に追加しました（親要素の高さが明示的に指定されている場合、何も動作していないようです。彼らは高さがautoに設定されているように常に行動します。

私は本当に知っている必要があるすべてのものになる前に、ちょうどCSSでこれを達成する方法がある場合、または私が何かを欠けている場合、すべてのものをリッピングし、新鮮な試みをすることを検討しています。

私は十分にはっきりしていることを望みます。

Answer 1

特定の高さに<figure>を設定し、overflow: hidden;して、イメージのために、何かしない理由を3列部分のため：その他の問題については

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

を、あなたは<article>を設定したいと直接の子供aと<figure>は、それがdisplay: flex;に入っています。それはあなたに "100％の高さ"の効果をもたらすでしょう。