ソラリンク株式会社ロゴ

北海道帯広市にあるホームページ制作、WordPressの構築を手がける制作会社

備忘録MEMO

【インスタの埋め込みに】画像を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;
}

備忘録

制作サポートエリア

ソラリンク株式会社は、帯広市を拠点とし、北海道全域(札幌、旭川、函館、釧路、苫小牧、室蘭、北見)をサポートエリアとしております。もちろん、メールやスカイプでの打ち合わせであれば、日本全国からのご依頼に対応可能です。