在 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

哟，

这取决于你的看法... 如果你只是想拉图片然后

• display:none 到您的 a 标记（默认为内联，因此不是块...）
• width: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