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

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;
}

我不确定这在 bootstrap 的上下文中如何工作，但如果您不能为图像或其父级指定明确的高度，选项 2 可能是您唯一的选择。

细节中有更多的魔鬼，具体取决于您的情况，但希望这对您有所帮助。

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

Force Wordpress images to have same height despite upload dimensions using Bootstrap

css

php

wordpress

image

image-size