Question

我有一些代码可以在Wordpress中输出图像......

<div class="col-md-2">

<?php $image = get_field('artist_photo');
       if( !empty($image) ): 
        // thumbnail
        $size = 'medium';
        $thumb = $image['sizes'][ $size ];
       ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" class="img-responsive" />

</div>

<?php endif; ?>

问题是，所有图片都有不同的高度（基于原始上传时的比例）。

是否可以使它们具有均匀的高度，同时保持响应？

Answer 1

以下两种方法可以限制CSS中图像的高度。

首先，您可以设置最大高度。如下所示：

.col-md-2 img {
  display: block;
  max-height: 300px;
  width: auto;
  height: auto;
}

其次，您可以将图像显示为背景图像，然后使用background-size属性来约束它。在标记中使用以下方式显示图像：

<div class="image" style="background: url(<?php echo $thumb; ?>) no-repeat center;" />

并且风格如此：

.col-md-2 {
  height: 300px;
}

.col-md-2 div.image {
  height: 100%;
  width: 25%; // for example, assuming you want 4 images per row
  background-size: constrain;
}

我不确定这在引导程序的上下文中是如何工作的，但是如果您无法为图像或其父级指定显式高度，则选项2可能是您唯一的选择。

细节中有更多的恶魔，具体细节将取决于你的情况，但希望这是有帮助的。

尽管使用Bootstrap上传尺寸，但强制Wordpress图像具有相同的高度

1 个答案: