Wordpress 缩略图图像

Question

我在一个网站上工作，在主页上我有三个小框，它们显示来自 wordpress 的帖子的特色图片。

我正在尝试获取它，以便图像可以很好地查看并根据正在查看的设备的屏幕尺寸做出响应。我目前将图像显示为“完整”，因此我可以尝试使用 CSS 对其进行裁剪，而不是放大较小的图像。

我想知道是否有人对最好的方法有什么建议。

我目前的布局如下：

PHP 代码：

<?php $top_query = new WP_Query('cat=CaseStudies&showposts=3'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post(); ?>
    <?php
    echo '<a class="moreinfoC" href="ntg.local/';
        the_permalink();
    echo '/">';
    echo '<div class="col-md-3">';
    echo '<h4 class="case-head">';
        the_title();
    echo '<span> </span></h4>';
    echo '<div class="caseimg">';
        the_post_thumbnail( 'full' );
    echo '</div></a>';
    echo '</div>';
    ?>
<?php endwhile; ?>

CSS 代码：

.caseimg {
    margin-top: -10px; 
    height: 130px;
    overflow: hidden;
    max-height: 130px;
    max-width: 100%;
    width: 100%;
    display: block;
}

.caseimg img {
    width: 100%;
    max-width: 100%;
    height:auto;
}

如果有任何用处，我也在使用 Bootstrap/Roots 框架。

Answer 1

看看这个网站：http://css-tricks.com/css-media-queries/

您应该使用 css @media 查询。