style: "background-image"でhtmlに直書きした画像表示をimage

style: "background-image"でhtmlに直書きした画像表示をimage_tagで書き換えたいのですが、レイアウトが同じように表示されずうまくいきません。

以下hamlとscssでの記述になります。

ruby
1%li.item-wrapper
2  .item
3    .item__img{style: "background-image: url(#{item.images[0].image});"}
4      .item__price
5        .item__price-mask
6          .price
7            = "¥ #{item.price.to_s(:delimited)}"
8    .item__text-wrapper
9      .item__text
10        = item.name
11        .item__text-gradient

上記を記述したところ、情報が分散され保守性が落ちると言われ、他の記述方法を求められました。
下記のようにimage_tagで同様に記述したのですが、レイアウトが崩れてしまってうまくいきません。
どうすれば同様に記述できるのでしょうか？

ruby
1%li.item-wrapper
2  .item
3    = image_tag item.images[0].image, class: 'item__img' do
4      .item__price
5        .item__price-mask
6          .price
7            = "¥ #{item.price.to_s(:delimited)}"
8    .item__text-wrapper
9      .item__text
10        = item.name
11        .item__text-gradient

scss
1.item-wrapper{
2  background-color: #F5F5F5;
3  width: 204px;
4  height: 272px;
5}
6.item{
7  width: 184px;
8  height: 252px;
9  margin-left: 10px;
10  margin-top: 10px;
11  box-sizing: border-box;
12  box-shadow:2px 2px 5px rgba(0,0,0,0.5);
13  &__img{
14    width: 184px;
15    height: 184px;
16    position: relative;
17    background-size: cover;
18    background-repeat: no-repeat;
19    background-position: center center;
20  }
21  &__price{
22    height: 28px;
23    position: absolute;
24    top: 145px;
25  }
26  &__price-mask{
27    height: 100%;
28    background: rgba(0,0,0,0.5);
29    border-radius: 0 25px 25px 0;
30  }
31  .price{
32    font-size:16px;
33    color:white;
34    font-weight: bold;
35    padding:5px 10px 2px 10px;
36    opacity: 1.0;
37  }
38  &__text-wrapper{
39    background-color: white;
40    width: 184px;
41    height: 68px;
42    display: flex;
43    justify-content: center;
44    align-items: center;
45  }
46  &__text{
47    font-size: 13px;
48    width: 85%;
49    height: 60%;
50    overflow: hidden;
51    position: relative;
52  }
53  &__text-gradient{
54    width: 50%;
55    height: 50%;
56    position:absolute;
57    bottom: 0;
58    right: 0;
59    background:linear-gradient(90deg,hsla(0,0%,100%,0),#fff 72%);
60  }
61}

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

回答1件

ベストアンサー

デジャブ感あるのですが、スクショかなんか貼ってもらわないとわかりにくいですね。
私は下記のような実装をしました。

▼部分テンプレート

haml
1%li.item-list__box__card
2  .item-list__box__card__wrapper
3    =link_to "#" do
4      %figure
5        .thumbnail
6          = image_tag "#{asset_path('item_dummy.jpg')}", alt: 'item-name', height: '', class: ''
7        %figcaption
8          %span 【アウトレット】新車1万台（車検なし）、一部キズヘコミ有り、お気軽にご相談ください！
9        %span.price ¥128,00
10

▼上記のスタイル

scss
1.item-list{
2  &__heading {
3    margin-bottom: 16px;
4    h3{
5      font-size: 24px;
6    }
7  }
8  &__box {
9    display: flex;
10    flex-wrap: wrap;
11    margin: -10px;
12    &__card{
13      width: 20%;
14      list-style: none;
15      &__wrapper {
16        margin: 10px;
17        box-shadow: $shadow;
18        border: 1px transparent solid;
19
20        &:hover{
21          border: 1px $light-blue solid;
22          box-sizing: initial;
23        }
24        a{
25          text-decoration: none;
26        }
27        figure{
28          background: $white;
29          position: relative;
30          .thumbnail {
31            height: 0px;
32            overflow: hidden;
33            padding: 0 0 100%;
34            position: relative;
35            background: $gray;
36            img{
37              bottom: 0;
38              position: absolute;
39              top: 0;
40            }
41          }
42          figcaption {
43            height: 64px;
44            font-size: 14px;
45            padding: 0 12px;
46            color: $black;
47            line-height: 1.4em;
48            span{
49              display: inline-block;
50              height: 2.8em;
51              overflow: hidden;
52              margin: 14px 0px;
53            }
54          }
55          .price{
56            position: absolute;
57            bottom: 80px;
58            left: 0;
59            height: 28px;
60            background: rgba(0,0,0,0.40);
61            padding: 0 12px;
62            border-radius: 0 14px 14px 0;
63            color: $white;
64            font-size: 17px;
65            letter-spacing: .02em;
66            z-index: 999;
67            display: inline-flex;
68            align-items: center;
69          }
70        }
71      }
72    }
73  }
74}