Ruby on Railsにて画像を投稿できるサービスを作っているのですが、投稿された画像の原寸大が指定した幅よりも小さいと、幅いっぱいに表示されず困っています。
haml
1 - @posts.each do |post| 2 .col-6.col-md-4.col-lg-3 3 .row.post 4 = link_to post, class: "theme-color-text" do 5 = image_tag post.thumbnail, class: "image-area" 6 .row.post-detail 7 .col-auto 8 %i.fas.fa-heart 9 .col-auto 10 %i.far.fa-eye 11 .col-12.comment-area 12 = post.comment
scss
1.image-area { 2 width: 100%; 3 border-radius: 10px; 4 margin-top: 10px; 5}
調べてみると「原寸大以上には拡大させたくない」場合の記述は多く見られるのですが、「原寸大問わず幅いっぱいに表示させたい」場合がなかなか見つかりませんでした。ご教示いただけると幸いです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
クラス名から、 Bootstrap と Font Awesome を使っているようなので、 Bootstrap 4.1.3, Font Awesome 5.7.2 を使っていると仮定して回答をします。
今回の場合、theme-color-text
クラスが付与された要素に対して、width: 100%
を適用するか、w-100
クラスを付与することで、画像は原寸大以上に拡大するようになります。以下に、w-100
クラスを付与した場合を示します(動作確認用リンク)。
HTML
1<div class="container"> 2 <div class="row"> 3 <div class="col-6 col-md-4 col-lg-3"> 4 <div class="row post"> 5 <a href="#" class="theme-color-text w-100"> 6 <img src="https://placeimg.com/300/300/animals" class="image-area"> 7 </a> 8 </div> 9 <div class="row post-detail"> 10 <div class="col-auto"> 11 <i class="fas fa-heart"></i> 12 </div> 13 <div class="col-auto"> 14 <i class="fas fa-eye"></i> 15 </div> 16 <div class="col-12 comment-area"> 17 コメント 18 </div> 19 </div> 20 </div> 21 <div class="col-6 col-md-4 col-lg-3"> 22 <div class="row post"> 23 <a href="#" class="theme-color-text w-100"> 24 <img src="https://placeimg.com/600/500/animals" class="image-area"> 25 </a> 26 </div> 27 <div class="row post-detail"> 28 <div class="col-auto"> 29 <i class="fas fa-heart"></i> 30 </div> 31 <div class="col-auto"> 32 <i class="fas fa-eye"></i> 33 </div> 34 <div class="col-12 comment-area"> 35 コメント 36 </div> 37 </div> 38 </div> 39 <div class="col-6 col-md-4 col-lg-3"> 40 <div class="row post"> 41 <a href="#" class="theme-color-text w-100"> 42 <img src="https://placeimg.com/150/50/animals" class="image-area"> 43 </a> 44 </div> 45 <div class="row post-detail"> 46 <div class="col-auto"> 47 <i class="fas fa-heart"></i> 48 </div> 49 <div class="col-auto"> 50 <i class="fas fa-eye"></i> 51 </div> 52 <div class="col-12 comment-area"> 53 コメント 54 </div> 55 </div> 56 </div> 57 <div class="col-6 col-md-4 col-lg-3"> 58 <div class="row post"> 59 <a href="#" class="theme-color-text w-100"> 60 <img src="https://placeimg.com/50/50/animals" class="image-area"> 61 </a> 62 </div> 63 <div class="row post-detail"> 64 <div class="col-auto"> 65 <i class="fas fa-heart"></i> 66 </div> 67 <div class="col-auto"> 68 <i class="fas fa-eye"></i> 69 </div> 70 <div class="col-12 comment-area"> 71 コメント 72 </div> 73 </div> 74 </div> 75 <div class="col-6 col-md-4 col-lg-3"> 76 <div class="row post"> 77 <a href="#" class="theme-color-text w-100"> 78 <img src="https://placeimg.com/50/25/animals" class="image-area"> 79 </a> 80 </div> 81 <div class="row post-detail"> 82 <div class="col-auto"> 83 <i class="fas fa-heart"></i> 84 </div> 85 <div class="col-auto"> 86 <i class="fas fa-eye"></i> 87 </div> 88 <div class="col-12 comment-area"> 89 コメント 90 </div> 91 </div> 92 </div> 93 </div> 94</div>
CSS
1[class^="col-"] { 2 background: #ffa; 3} 4 5.col-auto { 6 background: #faf; 7} 8 9.col-12 { 10 background: #faa; 11} 12 13.image-area { 14 width: 100%; 15 border-radius: 10px; 16 margin-top: 10px; 17}
また、もしも画像の比率を正方形にしたい場合、絶対配置とobject-fit
プロパティを使うことが出来ます(動作確認用リンク)。
HTML
1<div class="container"> 2 <div class="row"> 3 <div class="col-6 col-md-4 col-lg-3"> 4 <div class="row post"> 5 <a href="#" class="theme-color-text w-100"> 6 <img src="https://placeimg.com/300/300/animals" class="image-area"> 7 </a> 8 </div> 9 <div class="row post-detail"> 10 <div class="col-auto"> 11 <i class="fas fa-heart"></i> 12 </div> 13 <div class="col-auto"> 14 <i class="fas fa-eye"></i> 15 </div> 16 <div class="col-12 comment-area"> 17 コメント 18 </div> 19 </div> 20 </div> 21 <div class="col-6 col-md-4 col-lg-3"> 22 <div class="row post"> 23 <a href="#" class="theme-color-text w-100"> 24 <img src="https://placeimg.com/600/500/animals" class="image-area"> 25 </a> 26 </div> 27 <div class="row post-detail"> 28 <div class="col-auto"> 29 <i class="fas fa-heart"></i> 30 </div> 31 <div class="col-auto"> 32 <i class="fas fa-eye"></i> 33 </div> 34 <div class="col-12 comment-area"> 35 コメント 36 </div> 37 </div> 38 </div> 39 <div class="col-6 col-md-4 col-lg-3"> 40 <div class="row post"> 41 <a href="#" class="theme-color-text w-100"> 42 <img src="https://placeimg.com/150/50/animals" class="image-area"> 43 </a> 44 </div> 45 <div class="row post-detail"> 46 <div class="col-auto"> 47 <i class="fas fa-heart"></i> 48 </div> 49 <div class="col-auto"> 50 <i class="fas fa-eye"></i> 51 </div> 52 <div class="col-12 comment-area"> 53 コメント 54 </div> 55 </div> 56 </div> 57 <div class="col-6 col-md-4 col-lg-3"> 58 <div class="row post"> 59 <a href="#" class="theme-color-text w-100"> 60 <img src="https://placeimg.com/50/50/animals" class="image-area"> 61 </a> 62 </div> 63 <div class="row post-detail"> 64 <div class="col-auto"> 65 <i class="fas fa-heart"></i> 66 </div> 67 <div class="col-auto"> 68 <i class="fas fa-eye"></i> 69 </div> 70 <div class="col-12 comment-area"> 71 コメント 72 </div> 73 </div> 74 </div> 75 <div class="col-6 col-md-4 col-lg-3"> 76 <div class="row post"> 77 <a href="#" class="theme-color-text w-100"> 78 <img src="https://placeimg.com/50/25/animals" class="image-area"> 79 </a> 80 </div> 81 <div class="row post-detail"> 82 <div class="col-auto"> 83 <i class="fas fa-heart"></i> 84 </div> 85 <div class="col-auto"> 86 <i class="fas fa-eye"></i> 87 </div> 88 <div class="col-12 comment-area"> 89 コメント 90 </div> 91 </div> 92 </div> 93 </div> 94</div>
CSS
1[class^="col-"] { 2 background: #ffa; 3} 4 5.col-auto { 6 background: #faf; 7} 8 9.col-12 { 10 background: #faa; 11} 12 13.image-area { 14 position: absolute; 15 top: 0; 16 width: 100%; 17 height: 100%; 18 border-radius: 10px; 19} 20 21.theme-color-text { 22 position: relative; 23 margin-top: 10px; 24} 25 26.theme-color-text::before { 27 display: block; 28 margin-top: 10px; 29 padding-top: 100%; 30 content: ""; 31}
投稿2019/03/04 21:16
総合スコア14731
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。