画像をHTMLでサイズ設定したが反映されない

Question

画像を180x50で設定したが、画像サイズが変わらず検証ツールで調べたら反映されたいない。

.buy-header
  .buy-header__logo
    = image_tag asset_path("logo.png", size: "180x50") 

.buy-header {
  background-color: #f8f8f8;
  width: 100%;
  padding-top: 30px;
  text-align: center;
  &__img {
    width: 180px;
    height: 50px;
  }
}

実際のview

Answer 1

クラス名入れて指定し直してみたりしたが変わらずだったので、render partialでheaderを入れることに変更しました。

Answer 2

検証ツールで調べたら反映されたいない。

指定している要素が間違っているかと思います。

.buy-header {
   ：
  &__logo img {
     ：
  }
}

Comments

[show721]

回答していただきありがとうございます！
遅くなり申し訳ありません。。
その後クラス名を入れてクラス名揃えて指定したのですが、変わらずでした。

render partialでheaderを入れることになりました！

ありがとうございます！！

Answer 3

Hamlの知識に乏しいのですが、
imgタグに、buy-header__imgというクラス名が追加されていないからではないですか?

(出力されたHTMLを見たほうが、問題解決に繋がりそうな気がします。)

---

追記: コメント内容が、こちら側でよく理解できなかったので画像にまとめました。

Comments

[show721]

回答頂きありがとうございます！
その可能性も踏まえて今記述したのですが、変わらないです。。。

[new1ro]

・imgタグのクラスには、何が指定されていますか? (念のため)
　実際にHTML側に何のクラスが指定されているか知りたいです。

・imgタグに「display: block;」を指定すると何か変わりますか? (おまじないみたいなものですが)

[show721]

・imgタグの所にimageとクラス指定しました。
その後sassにもimageと入れてパスがbuy-header__imageになっていました。

・入れてみましたがやはり何も変わらないですね。。。

[new1ro]

いくつかよくわからない点があり、回答欄に画像としてまとめました。
ご返答いただければ幸いです。

[1]
> その後sassにもimageと入れてパスがbuy-header__imageになっていました。
CSS側に、以下のように出力された、という理解であっていますか?
.buy-header__image {
width: 180px;
height: 50px;
}

[2]
> ・imgタグの所にimageとクラス指定しました。
というのは<img class="image">と指定した、という理解で合っていますか?

[3] 「img」と「image」は別の文字列です。
HTML側には「img」と書いてあり、CSS側には「image」と書いていることで反映されない、
ということはよく目にするので、あやふやなら、一度確認してみるようおすすめします。

[4] 「パス」というのはクラス名のことですか?
いったん「パス=クラス名」と解釈し、その前提で読み進めましたが、
こちらの誤解があればご指摘ください。
(<img>のsrc=""内に指定した画像パスのことを指していたりするでしょうか?)

[show721]

遅くなりまして申し訳ありません。
画像ありがとうございます！
[1],[2]
その解釈でお間違い無いです。

[3]
HTMLとCSSの文字列はどちらもimageにしてます！
言葉足らずでごめんなさい。

[4]
クラス名で間違い無いです。

[show721]

色々試しても反映されないため、画像ではなくメンバーが作ったheaderをrender partialにする事になりました！！

色々見てくださって回答してくださり本当にありがとうございます！