web前端入门到实战：CSS实现动态图片的九宫格布局

前提条件：content="width=750"

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
复制代码

效果图如下：

需求分析

高宽：

• 1张图【宽320，高320】[2倍稿尺寸]
• 2张图时【宽332，高332】
• 3张图、4张图、6张图，7张图、9张图时【宽220，高220】
• 5张图、8张图时【第4、第5张宽高332】，【其余220】

间距：

• 2张时，【最后一张】只有left方向margin
• 3张时，【第2张】左右margin
• 4张时，【第2张】和【最后一张】都只有left方向的margin，【3，4】有top方向的margin
• 5张时，【最后一张】只有left方向margin
• 6张、7张时，【第2张、第4张】有左右margin，从【第4