2021年01月29日
CSSで画像をトリミング
正方形にトリミングして縦横比を維持したまま可変してくれる方法
ul{
display: flex;
flex-wrap: wrap;
}
li{
position: relative;
width: 25%;
}
li:before{
content: "";
display: block;
padding-top: 100%;
}
img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}
https://recooord.org/css-images-trimming/
