使用CSS垂直对齐未知高度的响应图像

时间:2012-08-22 09:02:53

标签: html css image layout responsive-design

我正在尝试使用未知高度的图像在响应式布局中垂直对齐底部(见下图)布局图像。

缩放图像以适应列的宽度,但高度会有所不同,我无法提前知道它是什么。

enter image description here

不幸的是,目前我最接近的是这个

enter image description here

我真的很想避免在可能的情况下使用javascript,因为使用媒体查询会根据屏幕宽度改变列数 - 这会使javascript变得更复杂。

我目前使用的CSS是

#catalogue-items {
  @include clearfix;
  margin: 40px 0;

  .catalogue-item {
    width: 20%;
    float: left;
    margin-left: 4%;
    @include box-sizing(border-box);
    margin-bottom: 20px;

    img {
      width: 100%;
    }

    p {
      font-family: sans-serif;
      font-size: 0.8em;
      padding: 0.5em;
    }

    &:nth-child(4n + 1) {
      clear:left;
    }
  }
}

使用媒体查询更改第n个子选择器。

有没有办法做到这一点?

1 个答案:

答案 0 :(得分:2)

我会使用display: inline-block

来解决它

HTML:

<ul>
    <li>
        <img width="50" height="100" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="125" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="75" src="/img/logo.png"/><br/>
        Description
    <li>
<ul>

CSS:

ul {
    margin-left: -10px;
}

li {
    display: inline-block;
    margin: 0 10px 0 10px;
}

img {
    border: 1px solid red;
}

See Fiddle