【コピペ用】画像の比率を１：１に切り取るCSS

画像ファイルに比率を１：１にしたいと思ったことありませんか？

少なくとも１度は思うこと。

今回はそんな悩みをコピペするだけで解決できる方法をお教えします。

コピペの量も全く多くないので、是非ストックして必要な時にコピペしてください。

この記事を書くにあたってYoutuberのトラハックさんの以下の動画を参考にさせて頂きました。

・Cloud Storageに画像をアップ&プレビュー&削除【日本一わかりやすいReact-Redux講座 実践編#5】

本当にトラハックさんの動画は分かりやすい！

ぜひ皆さんもご覧ください！！！

対象のHTMLタグを用意#

imgタグの親要素にdivタグを用意し、以下のようなクラス名を付けて下さい。

    <div className="p-media__thumb">
      <img alt="1:1に切り取る" src="" />
    </div>

CSSをコピペ#

後は以下のCSSをコピペするだけ。

.p-media__thumb {
    position: relative;
    overflow: hidden;
    width: 100%
}

.p-media__thumb::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.p-media__thumb > img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

これで画像が1:1に切り分けられます。

楽チン！

Thunk you for reading