小刘同学负责企微内嵌 H5 开发，按照这个项目一贯的做法 UI 只出了移动端设计稿。今天的页面有个附件展示组件，不点击的时候大概就像微博图片那样直接九宫格展示。（点击再依据不同附件类型走各自的逻辑暂且不表）简单，对吧？小刘吭哧吭哧搞得差不多了，然后叫产品去开发环境瞅一眼。只见产品在 PC 企微客户端打开页面，横着一拉，小刘的组件就横向散开来了。一问小刘，原来长宽都是写的固定多少 rem。项目本身之前一直丢在企微移动端里展示，也就一直没考虑sizechange的情况。。。小刘改了好一会还没改好。
于是写个demo给他。
CSS:
代码语言：javascript复制 html,
body {
padding: 0;
margin: 0;
}
.img-list-wrap {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.img-item-wrap {
box-sizing: border-box;
width: 33.33%;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.img-item {
box-sizing: border-box;
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
position: absolute;
display: inline-block;
object-fit: cover;
}
复制代码HTML:
代码语言：javascript复制 <div class="img-list-wrap">
<div class="img-item-wrap">
<div class="img-item">
<img
src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
alt=""
/>
</div>
</div>
<div class="img-item-wrap">
<div class="img-item">
<img
src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
alt=""
/>
</div>
</div>
<div class="img-item-wrap">
<div class="img-item">
<img
src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
alt=""
/>
</div>
</div>
<div class="img-item-wrap">
<div class="img-item">
<img
src="https://wx3.sinaimg.cn/mw2000/006zCGJCly1gu3htqntrcj31400migor.jpg"
alt=""
/>
</div>
</div>
</div>
复制代码涉及到两个知识点：
- padding 百分比是相对于容器内容区域的宽度。故可依此画自适应正方形。
- img，video 适应容器宽高：object-fit (fill, contain, cover, scale-down, none)
