ARTICLE AD BOX
i have a loop of wordpress posts - each post is a horizontal flex container with an <img> on the left and a <div> on the right with content of variable height (posts flow one below another). i want to have a fixed width on the img (326px) and a height with auto or align-self:stretch so that the height will always be the same as that of the content div. this works fine, just.. not always. basically, based on the content that the content div may have, there are 3 heights for it, lets say small, medium and big. what happens is for sizes small and big the img gets the right height based on the content div, but not for size medium, strangely.. and while testing in inspect i saw that if i reduce the width of the img to something like 300px, then the height of the img will be ok everywhere. its all very strange to me and im looking to understand the root of the problem, what is it?
and to be honest, and to maybe help you help me, the solution i found is to use divs instead of imgs and set the background of the divs to be the image, but i really want to know whats the core logic for why it doesnt work with <img>.
this is my code (html/php and css):
function lista_cursuri() { ob_start(); $query_cursuri = new WP_Query([ 'post_type' => 'cursuri', 'posts_per_page' => 10, 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'ASC' ]); if ($query_cursuri->have_posts()) { while ($query_cursuri->have_posts()) { $query_cursuri->the_post(); ?> <div class="container-curs"> <img class="imagine-curs" src="<?php echo get_the_post_thumbnail_url(); ?>"/> <div class="informatii-curs"> <h2 class="titlu-curs"><?php echo get_the_title(); ?></h2> <div class="descriere-curs"><?php echo get_the_content(); ?></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Speakeri</div> <div class="detaliu-curs"><?php echo get_field('speakeri'); ?></div> </div> <div class="wrapper-detalii"> <div class="wrapper-detaliu"> <div class="tag-detalii">Limba</div> <div class="detaliu-curs"><?php echo get_field('limba'); ?></div> </div> <div class="separator-detalii"></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Caz live</div> <div class="detaliu-curs"><?php echo get_field('caz_live'); ?></div> </div> <div class="separator-detalii"></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Hands-on</div> <div class="detaliu-curs"><?php echo get_field('hands-on'); ?></div> </div> <div class="separator-detalii"></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Locuri disponibile</div> <div class="detaliu-curs"><?php echo get_field('locuri_disponibile'); ?></div> </div> <div class="separator-detalii"></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Preț</div> <div class="detaliu-curs"><?php echo get_field('pret'); ?></div> </div> <div class="separator-detalii"></div> <div class="wrapper-detaliu"> <div class="tag-detalii">Data</div> <div class="detaliu-curs"><?php echo get_field('data_cursului'); ?></div> </div> </div> <a class="vezi-detalii-curs" href="<?php echo get_the_permalink(); ?>">Vezi detalii</a> </div> </div> <?php } } wp_reset_postdata(); return ob_get_clean(); } add_shortcode('afisare_cursuri', 'lista_cursuri'); .page-id-2535 .container-curs { margin-top:100px; display:flex; flex-direction:row; gap:50px; align-items: stretch; width:100%; } .page-id-2535 .imagine-curs { width:326px; flex-shrink:0!important; align-self: stretch!important; max-height: none !important; min-height:0!important; min-width:0!important; object-fit:cover; } .page-id-2535 .informatii-curs { display:flex; flex-direction:column; margin-top:-15px; height:fit-content; width:100%!important; } .page-id-2535 .cursuri .column .titlu-curs { font-family:Montserrat!important; font-size:50px; line-height:65px; font-weight:400; color:#131B5C; margin-bottom:28px; word-break:normal; } .page-id-2535 .cursuri .column .descriere-curs { font-family:Noto sans; font-size:18px; line-height:27px; font-weight:400; color:#444444; margin-bottom:26px; } .page-id-2535 .cursuri .column .tag-detalii { font-family:Noto sans; font-size:16px; font-weight:400; color:#444444; } .page-id-2535 .cursuri .column .detaliu-curs { font-family:Noto sans; font-size:18px; line-height:27px; font-weight:600; color:#444444; } .page-id-2535 .cursuri .column .wrapper-detalii { display:flex; flex-direction:row; gap:20px; margin-top:27px; } .page-id-2535 .cursuri .column .separator-detalii { width:1px; height:42px; background:#E2E4E8; margin-top:7px; } .page-id-2535 .cursuri .column .wrapper-detaliu { display:flex; flex-direction:column; gap:2px; } .page-id-2535 .cursuri .column .vezi-detalii-curs { padding:20px; background:#408779; font-family:Noto Sans; font-size:18px; font-weight:500; color:white; flex-grow:0; width:fit-content; line-height:13px!important; vertical-align:middle!important; margin-top:44px; }