列表内不同宽高图片保持长宽比例一致

[xianzou]

列表内不同宽高图片保持长宽比例一致

使用栅格化系统进行图片布局的时候，里面经常需要放图片，但是图片的高宽不一定都一致，且需要图片加载不出来也有占位；

知识要点：块级元素（如div,p）的padding设置为百分比的时候，是按照容器的宽度来定的，那么我们可以按照图片的比例来设置容器的高度（使用padding-top/padding-bottom），图片则使用绝对定位显示在容器的下层。

直接上代码

html:

<div class="section-video">
  <ul class="list">
    <li>
      <a >
        <div class="img">
          <img class="" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" alt="logo">
          <span class="time">07:12</span>
        </div>
        <span class="title">图片说明</span>
      </a>
    </li>
    <li>
      <a >
        <div class="img">
          <img class="" src="https://unpkg.com/@icedesign/[email protected]/screenshot.png" alt="logo">
          <span class="time">04:58</span>
        </div>
        <span class="title">图片说明</span>
      </a>
    </li>
  </ul>
</div>

css：

* {
  box-sizing: border-box;
}

.section-video ul.list {
  padding: 5px;
  width: 100%;
  font-size: 12px;
  background-color: #0363b5;
  list-style: none;
  overflow: hidden;
}

.section-video ul.list li {
  display: inline-block;
  width: 25%;
  padding: 5px;
  float: left
}

.section-video ul.list li a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
}
# 关键代码
.section-video ul.list li .img {
  width: 100%;
  position: relative; 
  /* 使用相对定位 */
  height: 0;
   /* 高度设置为0，使用padding来设置高度*/
  overflow: hidden;
  padding-bottom: 54.545454%; 
  /* 使用padding-top也可，使用padding来撑高容器，高度为宽度的 54.545454%*/
}
# 关键代码
.section-video ul.list li .img img {
  position: absolute; 
  /* 使用绝对定位*/
  width: 100%; 
  /* 宽高为容器的宽高*/
  height: 100%;
  top: 0;
  left: 0
}

.section-video ul.list li .img .time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 15px;
  font-size: 12px;
  line-height: 18px;
  background-color: rgba(0, 0, 0, .48);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 0 10px
}

.section-video ul.list li .title {
  display: block;
  line-height: 18px;
  padding: 4px 0;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis
}

这种情况及时配置的图片有点小误差，我们也可以忽略。

使用优化方案后，当图片加载不出来的时候，容器的位置也不会消失。

示例截图：