Question

大家好。请帮帮我。我正在使用这个基于网格的框架。在中间我有3张这样的图像

<section class="row">   
  <div class="col-4">
  <img src="img/seo.jpg" alt="seo work" class="work-type">
  <h3 class="work-title">seo specialist</h3>
  </div>
  <div class="col-4">
  <img src="img/webdesign.jpg" alt="web design work" class="work-type">
  <h3 class="work-title">web designer</h3>

对于特定的img类，我正在使用这个CSS来使其响应

.work-type{
    max-width: 100%;
    height: auto;
}

现在。三个图像具有不同的高度，并且它们在网格框内采用不同的空间高度。我使用什么CSS让它们都以相同的高度出现？

Answer 1

您可以使用CSS和背景图片轻松完成此操作。

http://codepen.io/anon/pen/EyZxoP

在此代码中，我使用建议的解决方案显示您当前的问题。

如果您希望图片成为标记的一部分，那么您需要提供有关您正在寻找的解决方案的更多信息。（被迫变成相同尺寸的图像会发生什么？我们是否正在拉伸它们？裁剪？这些图像是否动态加载？在源代码中硬编码？它们是否为自定义帖子类型的特征图像，如员工后期类型？这是wordpress吗？上下文布局细节也会很好。）

我已经为div提供了背景图像属性，以便快速/轻松地避免倾斜和拉伸，以及任何其他形式的失真，因为布局的东西。此方法也可用于响应式布局。

.img-cont{
  height:200px;
  width:200px;
}

如何使不同高度的图像在保持响应的同时出现在同一高度，

1 个答案: