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查询。

Wordpress缩略图图像

1 个答案: