画像を枠内にトリミング
<figure> <a href="#" data-fancybox="gallery"><img src="#" alt=""></a> </figure>
figure { position: relative; &::before { content:""; display: block; padding-top: 100%; // 高さを幅の100%に固定(正方形) } a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } img { height: 100%; width: 100%; object-fit: cover; @include ie { object-fit: none; height: auto; } } }