【CSS】画像の正方形は無理があるのでbackground-imageを使うことにした。

f:id:Kawan0116:20210509150349p:plain

先日、object-fitについて書きました。

coool.blue

object-fitで正方形にするのは簡単です。

しかし、px指定するのですが、画面サイズが変わるとpxを変えないといけない。

これは。。。

でた結論がこちら。HTMLから。

<a href="sample-2.html"><div class="photo" style="background-image:url('images/tum-2.png');display:block;"></div></a>

imgではなくて、background-imageを使います。

CSSはこちら。別ファイルを作って、例えば「stycle.css」にするとかですね。

そして、HTMLでそのファイルを読み込むという形です。

.photo {
background-size: cover;
max-width: 100%;
padding-top: 100%;
margin-bottom: 1em;/*任意*/
background-repeat: no-repeat;
border: 1px solid #ccc;/*任意*/
border-radius: 10px;/*任意*/
padding-left: 2%;/*任意*/
padding-right: 2%;/*任意*/
margin-top: .8em;/*任意*/
}

ポイントは「background-size: cover;」と「padding-top: 100%;」です。

2~3枚程度なら正方形にトリミングしても良いですが、まぁ、めちゃくちゃめんどくさいので、画像の縦横が変わっても正方形にトリミングできるのが良いなと思っています。

object-fitでも出来ます。

しかし、px指定すると、画面サイズに応じて調整しないといけません。

px以外の単位も試しました。経験上、パーセントで指定すれば、いちいちpx指定をする必要がないという感じです。

でも出来ない・・・

お手上げ。

なので、background-imageを使いました。

なお、ChromeFirefox、Edge、IEで確認済みです。

画像は基本長方形であると思います。

なので、わざわざ正方形にする必要はないのですが、僕は正方形が好きですので、上のを書きました。

一点だけ注意するとすれば、画像のパスを間違わないことですね。

ここだけ注意すれば良いですね。

あと、これ、SEO的にどうなのって話もありますが、僕は全く気にしないので、この方法を取ります。

元々、imgを正方形にしたいということで、object-fitを使っていたのですが、先ほど書いたようにpx指定しか出来ない(僕の場合)。

なので、メディアクエリで対応していたのですが、端末の画面サイズに応じて、pxを変更しないといけない。

これはとてもめんどくさい。

しかし、background-imageを使えば解決です。

ふぉ~。

4時間くらいかけて正解に辿り着きました。

疲れましたね(笑)。

引き続き作業したいと思います。

あ、このブログについて作業しているのではなくて、ローカルでホームページを作っています。

そちらの作業で正方形にトリミングしました。

チラ見してもらうとこんな感じです。画像です。URLはありません。

f:id:Kawan0116:20210509144630p:plain

あくまで画像の部分です。

今後、正方形にする必要がある時は、background-imageを使いたいと思います。