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

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

新規登録して質問してみよう
ただいま回答率
85.39%
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種類以上に対応しています。

Q&A

解決済

2回答

13237閲覧

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

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種類以上に対応しています。

0グッド

1クリップ

投稿2021/05/11 08:44

編集2021/05/12 02:46

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

解決したいこと

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

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

該当のソースコード

_article.html.erb

html

1<div class="container"> 2<div class="row"> 3 <% @articles.each do |article| %> 4 <div class="col-md-4"> 5 <div class="card mb-4 shadow-sm"> 6 <div class="bd-placeholder-img card-img-top"> 7 <%= image_tag article.image, class: "img-fluid" %> # ここです 8 </div> 9 10 <div class="card-body"> 11 <h4><%= article.title %></h4> 12 <p class="card-text text-truncate"> 13 <%= article.text %> 14 </p> 15 <div class="d-flex justify-content-between align-items-center"> 16 <div class="btn-group"> 17 <button type="button" class="btn btn-sm btn-outline-secondary">詳細</button> 18 <button type="button" class="btn btn-sm btn-outline-secondary">編集</button> 19 </div> 20 <small class="text-muted">9 mins</small> 21 </div> 22 </div> 23 </div> 24 </div> 25 <% end %> 26</div> 27</div>

補足情報

  • Ruby 3.0.1
  • Rails 6.1.3
  • Bootstrap4

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/11 20:45

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

2021/05/11 20:49

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

2021/05/12 00:39

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

回答2

0

ベストアンサー

<div class="card h-100"> と各カードに .h-100 を付けます。
変数 $card-height: 100%; でデフォルトで高さ揃えができます。(v5でも同じです)
Cards · Bootstrap

投稿2021/05/11 11:45

編集2021/05/11 11:46
takna

総合スコア784

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tsuyoponta

2021/05/11 12:26

ありがとうございます。 各カードの高さは揃えることができました! 画像の高さを揃えることはできませんでしょうか?
takna

2021/05/12 00:17 編集

Bootstrap からは外れますが、思い付くのは画像を囲む要素のサイズを固定し、画像に `object-fit: cover;` を適用するとかですかね。※IEは非対応です
Tsuyoponta

2021/05/13 05:43

試してみましたが、期待通り結果は得られませんでした。 class="card h-100"ですと違和感があったため、画像のリサイズはやめて、class="card-columns"で各カードを敷き詰めることにしました。
guest

0

画像をimgタグで直置きではなく一定の縦横幅を持った要素の背景画像にすれば良いのでは。
見た感じ比率が違うので、画像が変に間延びしたりするよりは見た目担保できると思います。

投稿2021/05/11 20:50

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tsuyoponta

2021/05/12 03:01

私の理解が及ばず申し訳ないのですが、カードに画像を直置きではなく背景画像にするというのがわかりません。よろしければ「カードのサイズをそろえて画像は特定サイズの枠内で表示」の仕方をご教示いただけませんでしょうか。
m.ts10806

2021/05/12 11:31

>カードに画像を直置きではなく背景画像にするというのがわかりません。 固定のwidth,heightのdivの背景画像として今imgタグで置いている画像を background-imageに指定するだけです。 >「カードのサイズをそろえて画像は特定サイズの枠内で表示」の仕方 それは、taknaさんの回答で実現できたのでは?
Tsuyoponta

2021/05/13 05:48

残念ながらレスポンシブを担保した、画像のリサイズはできませんでした。 ありがとうございました。
m.ts10806

2021/05/13 05:57

「画像のリサイズがしたい」とはなかったのでそこには触れていません。 「特定サイズの枠内で表示したい」とあるのでその案を提示しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問