【助けてください】横長画像を縦長画像のものに差し替えたいが、サイズが合わなかったり表示されなくなったりします。

Question

前提・実現したいこと

LPのトップ画像の差し替えにあたり、横長の画像を横長の画像に差し替えたいと考えています。
具体的には、
・ページトップの画像を横長の画像から別の縦長の画像に変更
・画像のサイズは、新しく差し替える縦長の画像をそのまま入れたいです。
・配置はそのまま

該当のソースコード

●HTML

<div class="h_haikei_t"> <div class="tophaikei inview1 animated"> </div> </div>

●CSS
.h_haikei_t {
width: 100%;
max-width: 1200px;
height: 180px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px;
}
.tophaikei {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
height: auto !important; /IE6対策/
background-image: url(img/tophaikei1.jpg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;

試したこと

・親要素の .h_haikei_t のheightを180px→auto・100%に変更しました。そうすると画像が表示されなくなりました。
・画像だけをさしかえると、本来の横長画像のサイズで表示され、画像下部が途切れて表示されました。

Comments

[退会済みユーザー]

質問は編集できるので、コードは``` ```で囲ってください。codeボタンを押してもできます。

[x_x]

「横長の画像に差し替え」というのは縦長の画像ですかね？
何ピクセルあるのでしょうか？

Answer 1

親要素の高さを指定していない場合、100%/autoなどを指定すると、高さは0になります。ChromeでF12などで確認しながら作業を進めましょう。
.h_haikei_tの親要素に高さが合設定されているか確認しましょう

Comments

[dddddddddd]

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

こちら一度、親要素のheightを1900pxにしたのですが、変更した画像がスマホに収まらずわやくちゃになってしまいました。

その場合はどのようにしたらいいのでしょうか？

[yamato_user]

レシポンシブデザインの基本は
width:100%;にして、heightを自由に決めます。（<=厳密には全然違いますが）
とりあえず、.h_haikei_tのwidthを固定値で与えて、height:auto;としてみるといいかもしれません

[dddddddddd]

親身に教えてくださりありがとうございます！

.h_haikei_tのwidthを固定値で与えて、height:auto;にしてみたのですが、そうすると画像自体が表示されなくなり、配置される場所が消えてしまいました。

なんども申し訳ございません。この場合はどのようなことが考えられますでしょうか？

[yamato_user]

.h_haikei_tの親要素に高さを与えていますか？

[yamato_user]

もし、どうしても解決しないようなら、詳しいコードを加筆修正してください