原寸大問わず指定した要素の幅いっぱいに画像を拡大縮小させたい

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}

調べてみると「原寸大以上には拡大させたくない」場合の記述は多く見られるのですが、「原寸大問わず幅いっぱいに表示させたい」場合がなかなか見つかりませんでした。ご教示いただけると幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

クラス名から、 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

s8_chu

総合スコア14731

有名なCSS指定の公式みたいなもので以下のようなものがありますがいかがでしょうか。

css
1img要素 {
2  background: url(path/to/img) center center / cover no-repeat;
3}

投稿2019/03/04 10:41

yu-smc

総合スコア610

s8_chu

2019/03/04 21:16 編集

こちらの回答は、「前景画像を幅いっぱいに表示する場合は背景画像として記述する」という趣旨の回答でしょうか？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

原寸大問わず指定した要素の幅いっぱいに画像を拡大縮小させたい

関連した質問