質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

解決済

Bootstrapで画像サイズを統一したい。

Tsuyoponta
Tsuyoponta

総合スコア5

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

2回答

0リアクション

1クリップ

6680閲覧

投稿2021/05/11 08:44

編集2021/05/12 02:46

記事投稿アプリで画像のサイズ調整がうまいこといきません。
画像の表示には、Railsのヘルパーメソッド、image_tagを使用しています。

解決したいこと

レスポンシブを保ちつつ、カードのサイズを揃えて画像も特定サイズの枠内で表示したいです。
(左端のカード画像を右2つの画像サイズに合わせたい。その際に、画像が歪まないようにもしたい)

イメージ説明
ActiveStorageを導入しているのでimage_tagにvariantを用いて、resizeでsizeを指定してみたのですが
サイズが固定されてしまうため、レスポンシブを保てませんでした。
何か良い方法等、ご教示いただけたら幸いです。

該当のソースコード

_article.html.erb

html

<div class="container"> <div class="row"> <% @articles.each do |article| %> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <div class="bd-placeholder-img card-img-top"> <%= image_tag article.image, class: "img-fluid" %> # ここです </div> <div class="card-body"> <h4><%= article.title %></h4> <p class="card-text text-truncate"> <%= article.text %> </p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">詳細</button> <button type="button" class="btn btn-sm btn-outline-secondary">編集</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <% end %> </div> </div>

補足情報

  • Ruby 3.0.1
  • Rails 6.1.3
  • Bootstrap4

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2021/05/11 20:45

画像などはなるべくteratailの画像投稿機能を利用してください。(外部サービスだと何かの時に参照できないことがあります)
m.ts10806

2021/05/11 20:49

「縦だけ」ならheightを同値で揃えれば良いのでは。 「縦も横も」だとheight,widthを同値にすれば良いですが全て同じ比率でないと崩れます、どこまでを考えられてますか? もしくは「カードのサイズをそろえて画像は特定サイズの枠内で表示」ということもできますけど、どこまでを想定されているか記載してください。
Tsuyoponta

2021/05/12 00:39

言葉足らずですみませんでした。 画像も直接挿入するように修正しました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。