aタグが指定した幅通りに動かない wordpress

Question

wordpress自作テーマ内で画像にリンクをつけたくimgをaタグで囲んだのですが、指定した幅になってくれません。
以前はimgに親要素の33%の幅指定をしていたのですがaタグにこの幅を指定しても画像ごとにサイズが変わってしまいます。
また、img自体にはwidth:100%を指定して横縦100%にしているのですがaタグで囲むと縦幅が100%から変わってしまいます。
これ自体はheightで100%の指定をする直るのですが、今までwidthの指定のみで縦幅も動いていたのに釈然としません。
添付画像のように親要素の33%の幅をキープしたまま画像にリンクを貼りたいです。
どたなかよろしくお願いします。

<?php get_header(); ?>





<!--ページ上部にスクロールするボタン
 <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
-->


<div class="sp-newarticle">
  <p>新着記事</p>
</div>


<div class="main">

  <div class="articles">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article class="article">
      <a class="link-img" href="#"><img class="article-img" src="<?php echo catch_that_image(); ?>"></a>
        
            <div class="article-right">
          <header>
            <h2 class="article-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <section>
            <div class="section-header">


            <ul class="article-genre">
              <li><time><i class="far fa-clock"></i><?php the_time('Y/m/d'); ?></time></li>
              &ensp;
              <li><a href="#"><i class="fas fa-tag"></i><?php the_category(' '); ?></a></li>
              <li class="article-tag"><a href="#"><?php the_tags( '', ' , ' ); ?></a></li>
            </ul>
        </div>
      </section>

          </header>

<section class="article-text">
    <p> <?php the_excerpt(); ?>
</p>
</section>
<footer> 
  <a class="read-more-sp" href="<?php the_permalink(); ?>">...記事を読む</a>  
    <a class="read-more" href="<?php the_permalink(); ?>">続きを読む</a> 
</footer>
        </div>

    </article>
    <?php
  endwhile;
      endif;
      ?>
  </div>

<?php get_sidebar(); ?>
</div>



  <?php
  //Pagenation
  if (function_exists("pagination")) {
  	pagination($additional_loop->max_num_pages);
  }
  ?>

<div class="mobile-search">
  <p class="mobile-search-title">サイト内検索</p>
    <?php  get_search_form(); ?>
</div>

<aside id="mobile-rank"><?php dynamic_sidebar( 'side-widget2' ); ?></aside>
  </div>

<?php get_footer(); ?>

@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1.4; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

* { margin: 0; padding: 0; box-sizing: border-box; }

p { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; }

img { height: auto; width: auto; max-height: 100%; max-width: 100%; vertical-align: middle; }

a { text-decoration: none; }

li { list-style: none; }

.container { width: 100%; padding-top: 10px; max-width: 1170px; background-color: #ECF0F3; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 779px) { .container { padding: 5px; } }

.sp-logo { display: none; }

@media screen and (max-width: 568px) { .sp-logo { display: block; }
  .pc-logo { display: none; } }

.header { background-color: #ECF0F3; text-align: center; line-height: 140px; height: 140px; position: relative; }

.heade-rabel { padding: 0 12%; height: 60px; background-color: #232323; display: flex; align-items: center; }

.heade-rabel a { font-size: 18px; font-weight: 600; color: white; }

.subtitle { font-size: 11px; }

.header-right { margin: 0 0 0 auto; }

.header-link:nth-of-type(2) { padding: 0 85px; }

@media screen and (max-width: 1400px) { .header-link:nth-of-type(2) { padding: 0 25px; } }

.page { background-color: #ECF0F3; }

.top-btn { display: flex; justify-content: space-between; margin-bottom: 20px; }

@media screen and (max-width: 568px) { .top-btn { display: none; } }

.Genre-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; border: 1px solid #333; border-radius: 5px; background-color: rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); width: 163px; height: 50px; display: flex; align-items: center; justify-content: center; }

@media screen and (min-width: 569px) and (max-width: 779px) { .heade-rabel { height: 40px; padding: 0 10%; }
  .heade-rabel a { font-size: 14px; } }

@media screen and (min-width: 780px) and (max-width: 1023px) { .heade-rabel { height: 50px; }
  .heade-rabel a { font-size: 16px; }
  .Genre-btn { font-size: 16px; width: 143px; height: 40px; } }

@media screen and (max-width: 568px) { .heade-rabel { display: none; } }

.main { display: flex; }

.articles { max-width: 850px; flex: 1 1 auto; }

.article { max-width: 850px; height: 190px; padding: 15px; display: flex; background-color: #FFFFFF; border-radius: 3px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin-bottom: 20px; position: relative; }

.link-img { width: 33%; margin-right: 20px; }

.article-img { width: 100%; height: 100%; }

.article-title { border-bottom: #aaaaaa solid 1px; font-size: 20px; font-weight: 600; }

h2 a { color: #666; }

time { font-size: 14px; font-weight: 600; color: #666; }

.section-header { display: flex; font-size: 14px; font-weight: 600; margin-top: 5px; }

.article-genre li { display: inline; list-style: none; }

.article-genre a { color: #666; }

.article-text { margin: 15px 0 5px; font-size: 12px; }

.read-more { background-color: #566170; border: none; border-radius: 10px; padding: 5px 30px 5px; color: #fff; font-weight: 600; font-size: 13px; position: absolute; right: 15px; bottom: 15px; }

.read-more-sp { display: none; color: #666; font-size: 10px; position: absolute; right: 15px; bottom: 5px; }

.sp-newarticle { display: none; font-size: 11px; border-left: 2px solid #1613b4; border-bottom: 2px solid #6476ee; background-color: #f9f9f9; padding: 5px; margin-bottom: 10px; font-weight: 600; }

@media screen and (min-width: 569px) and (max-width: 779px) { .article { height: auto; padding: 5px; }
  .article-title { font-size: 14px; }
  time { font-size: 10px; }
  .article-genre { font-size: 10px; }
  .article-tag { display: none; }
  .read-more { display: none; }
  .article-text { display: none; } }

@media screen and (min-width: 780px) and (max-width: 1023px) { .article-title { font-size: 16px; }
  time { font-size: 12px; }
  .article-genre { font-size: 12px; }
  .article-tag { display: none; } }

@media screen and (max-width: 568px) { .sp-newarticle { display: block; }
  .article-title { font-size: 10px; }
  time { font-size: 10px; }
  .article-genre { font-size: 10px; }
  .article-tag { display: none; }
  .article-text { display: none; }
  .article { height: auto; padding: 5px; }
  .read-more { display: none; }
  .read-more-sp { display: block; }
  .article-img { width: 33%; height: 100px; margin-right: 5px; } }

Answer 1

a要素(.link-img)に width: 33%;
a要素(.link-img)に flex: 0 0 33%;
img要素(.article-img) にwidth: 100%;
を設定すれば画像のサイズは親要素(.article)の33%のサイズになります。

a要素は通常はインライン要素なので幅の指定はききませんが、提示のコードだと親要素(.article)にdisplay: flex;が設定されているので、ブロック要素扱いにあり幅指定はききます。

高さですが、画像ごとに縦横比（アスペクト比）がことなるのでしょうか。
その場合は、画像に縦横比に合わせると当然高さが異なることになりますよね。
画像の縦横比は無視して高さを固定したいということでしょうか。

その辺りの情報を提示してもらえないでしょうか。

現状だとメディアクエリで画面幅によって、親要素の高さが固定だったり、autoだったりするので、画像が引き延ばされたり、おかしなことになってます。

Comments

[kawakamikami1]

画像の縦横比自体は問題ないのですが、aタグを囲むと何故か崩れてしまいます。
aタグを使わなかった場合と使った場合の画像を追加しました。
親要素の高さを固定しているのは記事タイトルの長さで要素の高さが変わってしまうのを防ぐために指定しています。

[hatena19]

親要素に flex を設定しているので、右側のタイトルが長いとそれに押されて縮んでしまいます。
flex: 0 0 33%; を追加して縮まないようにするといいでしょう。

[kawakamikami1]

解決しました。
flexのプロパティをもう少し学習してみます。
ありがとうございました。

Answer 2

aタグにこの幅を指定しても画像ごとにサイズが変わってしまいます。

a要素にdisplay: inline-block;を付けると改善するかもしれませんね。

a要素はインライン要素なので、通常、その内容に応じて幅が決まります。
inline-blockに変えれば、widthが効くようになると思います。

Comments

[kawakamikami1]

ありがとうございます。
今回はブロック要素を付与しても形が変わってしまったので質問させて頂きました。