cssが一部だけ反応しないんです

Question

cssが反応しないです...

GIFの大きさを変更したいのですが、なぜかwidthだけ反応しなくなってしまいました。
他のpositionやtopなどは反応します。
以前はその指示も反応したんですが今はなぜか全く反応しないです。

ちなみにcssの紐付けなどは間違い無いです、
詳しい方お力いただけますと幸いです。

  <div class="sp_fv02_gif"><img src="/img/img128_75.gif"></div>

.sp_fv02_gif img {
  position: relative;
  top: 0vw;
  left: 0vw;
  width:60%;
}

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、当方では問題なく幅が指定されました。
つまり、「なぜかwidthだけ反応しなくなってしまいました。」という問題が再現しません。

おそらく、ここに提示されていない部分のコードの影響だと思います。
問題が再現するコードをご提示ください。

[sugawata]

どのような環境で開発をされていますでしょうか？
確認に使っているブラウザなども追記していただけると色々な可能性を考えることができますよ！

[bakio]

迅速なご回答ありがとうございます。

<div class="sp_fv02">
<div class="sp_fv02_gif"><img src="img/img128_75.gif" ></div>
<div class="sp_fv02_img"><img src="img/sp_fv_002.png"></div>
</div>

このような形です。お手数をお掛け致します。

[bakio]

sugawataさま

コメントありがとうございます。
使っているブラウザはChromeで、環境はatomを使用しています。
参考になれば幸いです。

[kei344]

（質問文は編集できます）HTML/CSSは単体の要素に対する指定ではなく、別のCSS指定や要素の位置関係も影響するため、全体を質問文に提示してください。

[bakio]

なるほど、他のcssも影響している可能性があるので以後関係があるものに関しては記述いたします。
なるべく自助努力を徹底いたしますが、今後万が一不明点があった際には気をつけて質問していきたいと思います！親切に教えていただきありがとうございます！

Answer 1

new1roさんと似た回答になってしまいますが、widthを%で指定していることが原因かもしれません。
display:inlineになっていたり、親要素の幅が指定されていないなどなっていないでしょうか？

Comments

[bakio]

ご返信ありがとうございます。
displayの問題のようでした！
お力いただきありがとうございます。

Answer 2

以下、2つを試してみてください。

↓確認したいこと: display: inline;なので反応しない?

.sp_fv02_gif img {
  position: relative;
  top: 0vw;
  left: 0vw;
  width:60%;
  display: block; /* 追加 */
}

↓確認したいこと: %で指定しているから反応していないように見える?

.sp_fv02_gif img {
  position: relative;
  top: 0vw;
  left: 0vw;
  width: 300px; /* 変更 */
  display: block; /* なくてもいいかもしれないです。 */
}

Comments

[bakio]

display:blockで修正できました。
ご回答いただきありがとうございます！

[Lhankor_Mhy]

解決したのは何よりなんですが、うーん、解せないですね、インライン要素でも置換要素ならwidthが効くはずだけど……
親要素がフレックスアイテムとかなのかもしれない。