【CSS】長方形の写真を正円にする方法

スポンサーリンク

キーボードを買ったかわんです。Magic Keyboardを使ってましたが乗り換えました。

あと、iOS12.3がリリースされたようですね。僕はiPhoneとiPadを持っているのでサクッとインストールしました。

今のところ大きな問題はないですね。普段使用しているアプリを使っても問題なしです。

ただ、相変わらずマウスが使えないですね。使えるようになるまで気長に待とうホトトギス(笑)。

さて、毎日1サイトずつホームページを作ってます。しかし、1つだけ手間取りました(笑)。

それは長方形の写真を正円に出来ないこと。かなり悩みましたが、結局こんな感じで解決しました。

img {
  width: 53px;
  height: 53px;
  object-fit: cover;
  border-radius: 50%;
}

「width」と「height」は同じサイズにして、「object-fit: cover;」を使う感じです。あとは「border-radius: 50%;」で円形にするって感じかな。

僕の環境ではこれで大丈夫でした。ただ、「 object-fit: cover;」は全てのブラウザで対応していない模様。

ま、僕の場合はiPadでちゃんと表示されていれば良いのです。

あ、僕はiPadでを使ってホームページを作ってるのです。

iPadでもガッツリとホームページが作れます。キーボードがいるけど(笑)。

なお、「object-fit」を使いたくない場合は、写真を正方形にして「 border-radius」を使うこと。

写真の量にもよりますが、どちらか好きな方を選べば良いかと思います。

毎日1サイト作る

今のところ、毎日1サイト作ってます。我ながらアッパレじゃ(笑)。

今、ホームページを制作するサービスを実施してます(タダじゃないよ・・・)。

営業マンは2人いますが、営業活動をしてないので頼っちゃいられない(笑)。

僕自身も営業しています。仕事ないねー・・・。ま、気長に探すことにする!

大概のレイアウトは作れるようになった

基本的にグリッドデザインであれば問題なく作れるようになりました。

あとは見せ方の問題。Webデザインギャラリーで良さげなホームページがあれば模写することにしてます。

頭で考えるより手を動かす!これが上達への近道である!

上で書いた正円の件は、ツイッターの正円アイコンみだいにしたくて試行錯誤したのです。ま、上で書いたように解決したので良かったですが・・・。

まとめ

写真は四角なのですが、たかが正円にするだけで膨大な時間がかかりました。

でも、マスターしたので今後はサクッと行けるはず。

さて、ホームページを作りますかな(笑)。