はじめに
本記事では、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だけで画像の縦横比を維持したサムネイルを表示する
今日はスローペースでしたが、
明日の用事はありませんのでバリバリ頑張ります！！
↧