带图像的自定义网格

时间:2017-07-18 19:30:01

标签: html css grid-system

所以我使用了像Bootstrap3这样的库,因为我正在学习Web开发,但我希望通过完全理解并能够重新创建bootstrap中可用的一些东西来进一步了解web dev。我目前正在搞乱自定义网格并将图像放入其中以保持响应。问题是,无论图像的大小在我的行中,我都希望图像都在一个高度。图像的宽度正是我的想法,但我不能让高度相同(或至少切掉任何多余的图像。这是我正在研究的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%;
}

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

你想让图像填充各自的列,但都具有相同的高度吗?

您当然可以在图片周围添加包装div,并将其设为height:200pxoverflow:hidden。但这不会有回应。

如果我理解正确的话,你想要的是,如果不使用flexbox或javascript,就无法在CSS中完成。看到我从google:https://codepen.io/imohkay/pen/gpard无耻地挑选的这个codepen。或者更深入一点:https://clearleft.com/posts/270