[CSS]画像を縦横比を変えず表示

はじめに

本記事では、CSSで画像を縦横比を変更させないようにする方法を記述しました。
本日私が行ったことになりますので、一部他の方と異なる可能性がありますので、
ご容赦ください。

コード

ビュー
ここは個人の自由です。

<div class="ranks-food-post">
  <div>
    <%= link_to user_path(food.user_id) do %>
      <% if food.user.icon.present? %>
        <%= image_tag food.user.icon, class: "icon-img" %>
      <% else %>
        <i class="fas fa-user-circle"></i>
      <% end %>
    <% end %>
  </div>
  <div>
    <%= link_to user_path(food.user_id),class: "ranks-food-post-user" do %>
      <%= food.user.nickname %>
    <% end %>
  </div>
</div>

.ranks-food-img {
  width: 25vw;
  height: 25vw;
  margin: 1vw;
  object-fit: cover;　　←ここ！！
  background: #ffc29050;
  border: 2px solid #2c161c46;
  border-radius: 5vh;

結論

widthとheightの大きさは合わせておくことで
正方形になるので綺麗に見えるのではないでしょうか。

object-fit: cover;を使用することで、
画像が縦に長くなったり、横に伸びたりすることはなくなり、
指定された範囲内で画像をそのままの比率で表示してくれます。

以上です。

終わりに

調べた結果、
このようにすることで、画像を綺麗に見せることができました。
これをすることで、投稿した画像やアイコンをうまく見せることができると思います。

以下参考サイトです。
CSSをつかって円をつくるよ！ | border-radius
CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】
画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS
↓この方の記事たちはおすすめです。
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する

今日はスローペースでしたが、
明日の用事はありませんのでバリバリ頑張ります！！