【Rails】image_tag内の親classに子クラスを設定したい

Question

現在以下のコードを書いてるのですが、"top/top.jpg"のクラスに子クラスを設定できません。

// top/index.html.slim

= image_tag("top/top.jpg", :style => "width: 100%; height: 100vh; opacity:0.5;", :id => "wrapper_top")
    div class="top_left"
    div class="top_right"

//top.scss

#wrapper_top {
  width: 100%;
  height: 100vh;
}

.top_left {
  width: 50%;
  height: 100vh;
}

.top_right {
  position: relative;
  width: 50%;
  height: 100vh;
  left: 50%;
}

恐らくimage_tagが邪魔してて子クラスを作れないのだと思っています。
image_tagを使わない方法もあるのですが、画像はassets以下に置いてあるのでimage_tagを採用したいです。

何卒よろしくお願いいたします。

Comments

[maisumakun]

> "top/top.jpg"のクラスに子クラスを設定できません。

希望する結果を「HTMLで」書いていただけますか？

Answer 1

//slim
div class="wrapper_top"
    div class="wrapper_image"
        = image_tag("top/top_test.jpg", :style => "width: 100%; height: 100vh; max-width:100%; max-height:100%;")
    div class="top_left"
        div class="button_left"
            a href="" 新規登録
            i class="fa fa-pencil"
    div class="top_right"
        div class="button_right"
            a href="" ログイン
            i class="fa fa-sign-in"

//scss

.wrapper_top {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.wrapper_image {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

.top_left {
  display: flex;
  width: 50%;
  height: 100vh;
}

.button_left {
  width: 50%;
  height: 25vh;
  left: 25%;
  top: 40%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em 2em;
  color: #2285b1;
  font-size: 30px;
  font-weight: 70;
  border: 3px solid #a0c4d3;
  border-radius: 10px;
}

.top_right {
  display: flex;
  width: 50%;
  height: 100vh;
}

.button_right {
  width: 50%;
  height: 25vh;
  left: 25%;
  top: 40%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em 2em;
  color: #2285b1;
  font-size: 30px;
  font-weight: 70;
  border: 3px solid #a0c4d3;
  border-radius: 10px;
}