スマホのときだけfade-imgの高さがなくなる

三枚の画像を順番に表示しています！
パソコンとスマホでレスポンシブを分けているのですがスマホのときのclass="top1"とclass="top2"の時だけfade-imgの高さがなくなり次の要素が隠れてしまって影響が出てしまいます。
高さは画面の横幅が変わっても崩れないように画像の高さにしたいので特にcssで設定してません。
コードも特に同じなのになぜスマホだけに影響が出てしまうのかわかりません、、、
fade-imgにposition:relative;してみたりしたのですが思ったようになりませんでした。
高さをちゃんと設定しないといけないのでしょうか？

<div class="pc"> <div class="fade-img"> <img class="top2" src="img/pc-1.jpg"> <img class="topbk" src="img/pc-2.jpg"> <img class="top1" src="img/pc-3.jpg"> </div> </div> <div class="sp"> <div class="fade-img"> <img class="top2" src="img/1.jpg"> <img class="topbk" src="img/2.jpg"> <img class="top1" src="img/3.jpg"> </div> </div> <h2>見えてる？</h2> <script> $(function () { $(".pc .fade-img img:not(:first-child)").fadeTo(0, 0); $(".sp .fade-img img:not(:first-child)").hide(); setInterval(function () { if ($(".pc").is(":visible")) { $(".pc .fade-img img:first-child") .fadeTo(2000, 0) .next("img") .fadeTo(2000, 1) .end() .appendTo(".pc .fade-img"); } else if ($(".sp").is(":visible")) { $(".sp .fade-img img:first-child") .fadeOut(2000) .next("img") .fadeIn(2000) .end() .appendTo(".sp .fade-img"); } }, 10000); }); /*画像差し替えアニメーション*/ .fade-img { width: 100%; z-index: 0; } .fade-img img{ width: 100%; } .topbk{ position:relative; } .top1, .top2 { position: absolute; left: 0; } </script>