【インスタの埋め込みに】画像をliで横に並べて正方形にトリミング(レスポンシブ対応・%で横と縦を指定)
【HTML】
<li><a href=”#”><img src=”sample.jpg”></a></li>
<li><a href=”#”><img src=”sample.jpg”></a></li>
<li><a href=”#”><img src=”sample.jpg”></a></li>
<li><a href=”#”><img src=”sample.jpg”></a></li>
【CSS】
li{
position:relative;
float:left;
width:22%;
height:auto;
margin:4% 4% 0 0;
}
li:nth-of-type(4n){
margin-right:0;
}
li:before{
content:””;
display:block;
padding-top:100%;
}
li img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}