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

【问题标题】：Force Wordpress images to have same height despite upload dimensions using Bootstrap尽管使用 Bootstrap 上传尺寸，但强制 Wordpress 图像具有相同的高度
【发布时间】：2016-03-29 00:12:05
【问题描述】：

我有一些代码可以像这样在 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; ?>

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

是否有可能使它们具有统一的高度同时保持响应？

【问题讨论】：

如果您解释您要使用的布局，将会有所帮助。这样可以更轻松地提出一些可以实现目标的 CSS。
布局如上 - Bootstrap 6 列。每列中的图像。目前，如果我上传 6 张不同的图像，它们都具有基于原始图像大小的不同高度。我需要每列中的每张图片都具有匹配的高度。

标签： php css wordpress image image-size

【解决方案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 可能是您唯一的选择。

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

【讨论】：

感谢 Greg - 试图避免将其作为背景图片，但这似乎是最有效的方式。