带有图像的自定义网格答案

【问题标题】：Custom Grid with Images带有图像的自定义网格
【发布时间】：2017-12-23 20:03:27
【问题描述】：

所以我在学习 Web 开发时使用了像 Bootstrap3 这样的库，但是我想通过充分理解并能够重新创建引导程序中可用的一些东西来进一步了解我在 Web 开发方面的知识。我目前正在使用自定义网格并将图像放入其中以保持响应。问题是，无论我的行中图像的大小如何，我都希望图像都在一个高度。图像的宽度正是我的想法，但我无法使高度相同（或者至少剪掉任何多余的图像。这是我正在处理的Custom Grid CodePen。我已经用谷歌搜索了答案但是很多问题的答案都在使用我没有使用的background-image 属性，任何帮助将不胜感激。谢谢！

编辑：

HTML

<div class="row">
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24">
    </div>
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY">
    </div>
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg">
    </div>
  </div>

CSS

.row {
  position: relative;
  min-width: 100%;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
}

.responsiveImage {
  max-width: 100%;
  height: auto;
  padding-top: 30%;
}

【问题讨论】：

标签： html css grid-system

【解决方案1】：

您想让图像填满它们各自的列但高度相同吗？

您当然可以在图像周围添加包装 div 并将它们设为 height:200px 和 overflow:hidden。但这不会是响应式的。

如果我理解正确的话，你想要的，如果不使用 flexbox 或 javascript，就无法在 CSS 中完成。看看我从谷歌无耻地挑选的这个代码笔：https://codepen.io/imohkay/pen/gpard。或者更深入的了解：https://clearleft.com/posts/270

【讨论】：

【解决方案2】：

您需要指定所需的高度，然后将图像宽度设置为 auto 以保持按比例缩放。

.responsiveImage {
  height: 300px;
  width: auto;
  padding-top: 30%;
}

【讨论】：