Zenn
👘

画像の縦横比(アスペクト比)を保って表示する

2023/10/03に公開
Rails
初心者
image
tech

この記事で分かること

  • 画像を適切なサイズで表示する方法

画像表示をするときに上手くいかなくて悩んだので記事にしました。

現状の問題

  • 元のデータの画像

defalt_image
illustAC

  • 投稿後の画像
    issue_image

画像の縦横比が崩れていることが見て取れると思います。

画像サイズを設定する方法

  1. (get_image)に直接サイズ入力する
  2. gem(imagemagick)を追加する
  3. cssで調整する

私は結果的にcssの調整で解決しました。

実装結果

実装手順に沿って紹介します。

1.(get_image)に直接サイズ入力する

今回、私が実装していた方法で、以下が実際のコードになります。

products/show
<%= image_tag @product.get_image, size:'300x300' %>

上記の方法だと自分の思い通りのサイズには設定できますが、今記事の問題となる「縦横比を保って表示する」を実現できませんでした。

2.gem(imagemagick)を追加する

下記の記事が参考になりました。

https://qiita.com/oak1331/items/81c7d925e25d0e6fa629

この実装方法をするか悩みましたが、エラーになると戻すことができないのでPFでは見送りにしました。(メンター質問期間が終了しているため)

3.cssで調整する

個人的にはこの方法が1番いいのではと感じました。

以下が実装した内容です。

  • image_tagにクラスを追加
products/show
- <%= image_tag @product.get_image, size:'300x300' %>
+ <%= image_tag @product.get_imageclass: 'product-img' %>
  • cssに記述
assets/stylesheets/application.scss
.product-img{
    max-width: 120%;
    height: auto;
    object-fit: cover; <!-- or contain; -->
}
  • object-fit・・・どのような画像や動画のサイズでも自動的に表示領域に画像や動画をフィットさせてくれるプロパティ

上記の記述で以下の通りになりました。
after_image

しかし画面を小さくするとサイズが合わなくなるので再度、調整します。
after_issue_image

  • cssにプラスで記述
assets/stylesheets/application.scss
/* タブレット縦置きサイズ（768px）以下 */
@media screen and (max-width:768px) {
  .product-img{
      max-width: 200%;
      height: auto;
      object-fit: cover; // or contain;
  }
}

/* スマートフォンサイズ（576px）以下 */
@media screen and (max-width:576px) {
  .product-img{
      max-width: 100%;
      height: auto;
      object-fit: cover; // or contain;
  }
}
}

上記のようにレスポンシブ対応させたら完成です。

complate_image

以上で「画像の縦横比(アスペクト比)を保って表示する」を終わります。

感想

(size:'数値x数値')は簡単に実装できますが、上手くいかないことが多いみたいですね。cssもそこまで記述量が多いわけではないので、これからはcssで画像サイズを調整しようと思います。

この記事をかいた人

https://twitter.com/tya_dwc
23/6/1にDWCに入学し、主にRailsの学習に取り組みました。卒業が近づきこれから何で学習をするか悩んだときに、技術ブログをしようと考えました。初心者ですがよろしくお願いします。

Discussion