Сделать подгонку изображения в определенную область размера в Wordpress

Question

У меня есть страница поиска здесь:

http://www.journeyfilm.com/?s=screening

Это показывает пост с изображением признаков. Проблема в том, что изображение не такое же, как область, в которой он должен соответствовать. Как вы можете видеть, это делает так, что изображение кажется очень маленьким. Я бы хотел, чтобы он просто потянул миниатюру или поместил ширину и спрятал любую дополнительную высоту через css. Похоже, что нужно потянуть миниатюру, а если нет миниатюры, то появится изображение по умолчанию.

Вот мой content.php HTML

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
     <header class="entry-header"> 

     <?php if ('post' == get_post_type() || 'video' == get_post_type()) : ?> 
        <a href="<?php the_permalink(); ?>" rel="bookmark"> 

        <?php 
         if (has_post_thumbnail()) { // check if the post has a Post Thumbnail assigned to it. 
          the_post_thumbnail(array(300, 165)); 
         } else { 
         ?> 
         <img src="<?php echo esc_url(home_url('/')); ?>/wp-content/uploads/2014/10/ftr-image-journeyfilm.png" title="Journey Film Logo" alt="Journey Film Logo"/> 
         <?php } ?> 
         <h1 class="entry-title-search"><?php the_title(); ?></h1> 
         <div class="entry-meta-search"> 
         <?php undiscovered_posted_on(); ?> 
        </div> 
       </a> 

     <?php elseif ('page' == get_post_type()) : ?> 
       <a href="<?php the_permalink(); ?>" rel="bookmark"> 
       <h1 class="entry-title-search"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1> 
        <?php if (has_post_thumbnail()) { // check if the post has a Post Thumbnail assigned to it. 
         the_post_thumbnail(array(300, 165)); 
        } else { 
        ?> 
         <img src="<?php echo esc_url(home_url('/')); ?>/wp-content/uploads/2014/10/ftr-image-journeyfilm.png" title="Journey Film Logo" alt="Journey Film Logo"/> 
        <?php } ?> 
        <div class="entry-meta-search"> 
         <span class="posted-on">Standard Page</span> 
        </div> 
       </a> 
     <?php endif; ?> 
</header> 
</article> 

И мой search.php HTML:

<?php get_header(); ?> 


    <section id="primary" class="content-area search "><!--.w-sidebar--> 
     <main id="main" class="site-main" role="main"> 
     <h1 class="search-title">Search Results: <?php echo the_search_query()?></h1> 
     <?php 

      if(isset($_GET['post_type'])) { 
       $type = $_GET['post_type']; 
       $args = array('post_type' => $type); 
       $args = array_merge($args, $wp_query->query); 
      query_posts($args);  
      } 
     ?> 
     <?php if (have_posts()) : ?> 
      <?php while (have_posts()) : the_post(); ?> 
       <?php get_template_part('content', 'search'); ?> 
      <?php endwhile; ?> 

      <div class="clear"><div><?php undiscovered_paging_nav(); ?> 
     <?php else : ?> 
      <?php get_template_part('content', 'none'); ?> 
     <?php endif; ?> 

     </main> 
    </section><!-- .primary -search.php --> 
</div> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?> 

CSS:

a img { 
    border: 0 none; 
} 
img { 
    height: auto; 
    max-width: 100%; 
} 

img { 
    vertical-align: middle; 
} 

Любые предложения будут с благодарностью. Спасибо!

Answer 1

Yo,

это зависит от того, что вы espect ... если вы просто хотите, чтобы вытащить картину, то

• дисплей: нет к вашему в разметки (встроенный по умолчанию поэтому не блок ...)
• ширина: 100% к вашему IMG разметки

Тогда, если изображение слишком велико (по высоте), а затем оберните его ..

a{ 
 
    display: inline-block; 
 
    max-width: 200px; 
 
} 
 
.picture{ 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.picture img{ 
 
    transform: translate(0, -50%); 
 
    width: 100%; 
 
    height: auto; 
 
}

<header class="entry-header"> 
 

 
    <a href="http://www.journeyfilm.com/the-long-haul-screenings-at-the-trail-running-film-festival/" rel="bookmark"> 
 
    <div class="picture"> 
 
     <img width="110" height="165" src="http://www.journeyfilm.com/wp-content/uploads/2015/03/The-Long-Haul-Poster-TRFF-Label-200x300.jpg" class="attachment-300x165 wp-post-image" alt="-The Long Haul Poster-TRFF Label"> 
 
    </div> 
 
    <h1 class="entry-title-search">The Long Haul Screenings at The Trail Running Film Festival</h1> 
 
    <div class="entry-meta-search"> 
 
     <span class="posted-on"> 
 
     <time class="entry-date published" datetime="2015-03-05T17:42:14+00:00">March 5, 2015</time> 
 
     <time class="updated" datetime="2015-03-05T17:50:05+00:00">March 5, 2015</time> 
 
     </span> 
 
    </div> 
 
    </a> 
 

 
</header>

и, как правило, мы используем показатель для этого: http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html