I want to add a link to an image in wordpress self-made theme I surrounded img with a tag, but it does not become the specified width.
Previously, the width of 33% of the parent element was specified for img, but even if this width is specified for the a tag, the size will change for each image.
Also, width: 100% is specified for img itself to make it 100% horizontal and vertical, but if you enclose it in a tags, the vertical width will change from 100%.
This itself is fixed by specifying 100% in height, but until now it is not surprising that the vertical width has also moved only by specifying the width.
I want to put a link on the image while keeping the width of 33% of the parent element like the attached image.
I look forward to working with you.

<? php get_header ();?>
<!-Button to scroll to the top of the page
<p><i></i></p>-><p>New articles</p>  <? php if (have_posts ()): while (have_posts ()): the_post ();?>         ">                   <header>           "><? Php the_title ();?>        <section>          
          <ul>            less
            <li><i></i><? php the_category ('');?></li>          <li><? php the_tags ('',',');?></li>        </ul>          </section>      </header><section><p><? php the_excerpt ();?></p></section><footer>">... Read the article     ">Read more</footer>        </article><? php
      ?><? php get_sidebar ();?>
<? php
  // Pagenation
  if (function_exists ("pagination")) {
      pagination ($additional_loop->max_num_pages);
  ?><p>Site search</p><? php get_search_form ();?><? php dynamic_sidebar ('side-widget2');?></aside><? php get_footer ();?>
@charset "UTF-8";
/ *
html5doctor.com Reset Stylesheet
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 colors to suit your needs * /
ins {background-color: # ff9;color: # 000;text-decoration: none;}
/ * change colors 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 color 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: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro", "Meiryo", Meiryo, Osaka, "MS PGothic", "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, rgba) 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 element (.link-img) Towidth: 33%;
    a element (.link-img) Toflex: 0 0 33%;
    img element (.article-img) Towidth: 100%;
    If you set, the size of the image will be the parent element (.article) Is 33% of the size.

    Since the a element is usually an inline element, the width cannot be specified, but in the presented code, the parent element (.article) Todisplay: flex;Since is set, it is treated as a block element and the width can be specified.

    Regarding the height, does the aspect ratio differ for each image?
    In that case, if you match the aspect ratio to the image, the height will naturally be different.
    Do you want to fix the height by ignoring the aspect ratio of the image?

    Could you please provide me with information about that area?

    In the current situation, depending on the screen width in media queries, the height of the parent element is fixed or auto, so the image is stretched or strange.

  • Answer # 2

    Even if you specify this width for the a tag, the size will change for each image.

    aTo the elementdisplay: inline-block;It may be improved by adding.

    aSince the element is an inline element, its width usually depends on its content.
    inline-blockIf you change towidthI think that will work.