Question

所以我有一个响应式投资组合库，显示我的投资组合自定义帖子类型的所有特色图像。

在functions.php中，我将帖子缩略图大小设置为：

set_post_thumbnail_size( 960, 540, true )

该网站的最大宽度为1920px，因此从技术上讲，因为它是一个双列图库，所以图像永远不会超过一半。

在Chrome上它看起来像我想要的那样，当浏览器变小时，图像会缩小到合适的大小。在Internet Explorer中，虽然他们没有响应，但是有什么想法，以及我如何解决它？

以下是我的图库的CSS：

@media screen and (min-width : 640px){

    .item{
        display:inline-block;
        clear:none;
    }

    .item:nth-child(odd){
        width:50%;
        float:left;
        clear:both;
    }
    .item:nth-child(even){
        width:50%;
        float:right;
    }
}

.img {
        position: relative;
}

这是html / php：

    <div class="item">
      <?php $site= get_post_custom_values('projLink'); 
        if($site[0] != ""){
      ?>        
        <div class="img">
          <a title="<?=$title?>" href="<?=$site[0]?>">
            <?php the_post_thumbnail(); ?>
          </a>
          <span class="itemTitle"><?php the_title(); ?></span>
        </div>
      <?php }
        else { ?>
           <p><em>You need to post your link.</em></p>
        <?php } ?>
   </div>

Answer 1

尝试将图像的宽度明确设置为父级的100％。

像这样：

.item img {
    position:relative;
    width: 100%;
}

编辑：不是类，实际的图像标记。

响应Wordpress后缩略图

1 个答案: