レスポンシブルに対応してサイズ比を変えずに画像の横幅を縮小したい

Question

前提・実現したいこと

見よう見まねで自分でホームページをつくっている素人です。
レスポンシブルに対応してサイズ比を変えずに画像を縮小したい

発生している問題・エラーメッセージ

パソコン画面では”YUKIO”の下の画像が上手く収まっているのですが

レスポンシブルにすると他は縮小していくのですが
”YUKIO"下の画像だけが元のままで横幅が縮小していかない

該当のソースコード

HTML

<header> <h1 class="yukio"><a href="index.html"><img src="images/yokio.jpg" alt="ロゴ" ></a> <img class="hamburger" id="open_nav" src="images/bars_24.png" alt="ロゴ"> </h1> <div id="slide"> <ul > <li ><img class="sun" src="images/0224.jpg" alt="画像1" width="800" height="146"></li> <li ><img class="sun" src="images/image021.jpg" alt="画像2" width="800" height="146"></li> <li ><img class="sun" src="images/image041.jpg" alt="画像3" width="800" height="146"></li> </ul> </div> </header>

css

@media screen and (max-width: 768px) {
#slide {
width: 100%;
max-width: 100%;

}

}

試したこと

cssのslideの頭には画面では消えてしまってますが#がついてます。
この”slide”のcssがききません。"slide"を入れているHTMLの場所が悪いのか？わからないのです。
ちなみに画像は3枚　JavaScriptで動かしているのですが、レスポンシブルに縮小していってもJavaScriptは効いていて順番に移り変わります。画像の横幅が縮小していかないだけなのです・・・

javascriptを念のため記しておくと下記のようになります。
（全然わかってなくてコピペしただけなのですが、ちゃんと動いてます。）
$(function(){
// 設定
var $width =800; // 横幅
var $height =146; // 高さ
var $interval = 16000; // 切り替わりの間隔（ミリ秒）
var $fade_speed = 3000; // フェード処理の早さ（ミリ秒）
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});

パソコン画面用のcss（こちらも"slide","slide img"左には画面では消えてますが#は付いてます。)
#slide {
width:800px;
height:146px;
margin:0 auto;
position:relative;
}
#slide img {
position:absolute;
left:0;
top:0;
}

パソコン画面の方は私の理想通りに動きます。

レスポンシブルの時に画像の横幅が収縮して(ただしサイズ比を変えない）いかないだけなのですが、わかりません。誰か教えていただけないでしょうか？よろしくお願いいたします。

Comments

[hatena19]

コードはマークダウンのコードブロックに入れてください。そうすれば、# は消えません。

コード部分を選択してからツールバーの <code> をクリックするとコードブロックになります。

Answer 1

画像(img要素)のサイズを指定していないのが原因です。幅を#slideのサイズに合わせたいなのら、下記のように100%に指定すればいいでしょう。縦横比を維持するにはheight: auto;も追加します。

#slide {
  max-width:800px;
  margin:0 auto;
  position:relative;
}

#slide ul  {
  width:100%;
  padding-top: 17.25%;
}

#slide img {
  width: 100%; 
  height: auto;
}

@media screen and (max-width: 768px) {
  #slide {
    width: 100%;
  }
}

padding-top: 17.25%; の数値は画像の縦横比を設定してください。
横800px 縦146pxの場合
149 / 800 * 100 = 18.25

jQueryの方でもwhdth, height を設定していますが、その部分は削除してください。

$(function(){
  // 設定
  var $interval = 8000; // 切り替わりの間隔（ミリ秒）
  var $fade_speed = 3000; // フェード処理の早さ（ミリ秒）
  $("#slide ul li").css({"position":"relative","overflow":"hidden"});
  $("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
  $("#slide ul li:first").addClass("active").show();
  setInterval(function(){
    var $active = $("#slide ul li.active");
    var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
    $active.fadeOut($fade_speed).removeClass("active");
    $next.fadeIn($fade_speed).addClass("active");
  },$interval);
});

CodePenサンプル

Comments

[youyouy]

返答ありがとうございます！ただ、上記書かれた通りにやってみたのですが（上のcss,
javascriptをそのままコピペもしてみました）、レスポンシブ画面では何もかわらず、パソコン画面では画像そのものが消えてしまいました。私の書き込んだ位置が悪いのでしょうか？どうにもよくわかりません。ご教示いただければ助かります。

[hatena19]

回答に動作サンプルのリンクを追加しましたのでご確認ください。

[youyouy]

ど素人な者ですからすいません、、、。どこを見ればいいのかわからなくて。。。hatena19さんのページに飛んでいくと、回答がたくさんあって、、、。どれを見ればよろしいのでしょうか？

[youyouy]

わかりました。codePenサンプルをみればいいのですよね。みます！

[hatena19]

こちらです。
https://codepen.io/hatena19/pen/KKaMLjg

[youyouy]

成功しました！！ありがとうございます。　ただ次の問題がでてきまして、、、。レスポンシブルにすると、小さくすればするほど、画像と下の赤のテキストの間に余白が生まれるようになってしまったのですが、、、。こちらをなんとか解決できないでしょうか？ご教示いただければ助かります。

[hatena19]

サンプルを修正しましたので確認ください。
回答も修正しておきます。

[youyouy]

すごいですね！！なおりました。ありがとうございます！ちなみに画像をもう少し高さを上げた画像に交換しても大丈夫なのですよね？今後のために、どのように発想したのか、その道筋を教えていただけませんでしょうか？padding-top:17.25％　なんていう数字はどう計算したらでてくるものなのでしょうか？

[hatena19]

回答にも説明してありますが、高さ÷幅 で計算できます。
「レスポンシプ対応 縦横比固定」でWEB検索すると解説ページがいろいろ見つかりますのでご参照ください。

[youyouy]

すいません。もうすこしお付き合いさせていただけないでしょうか？パソコンの中でせっかく上手くいったと思い、アップするとレイアウトが全然くずれてしまい、、、。https://yukio.asia
これはどこに原因があるのでしょうか？元に戻らなくなってしまったのですが、、、

[hatena19]

どの辺がレイアウトが崩れているのでしょうか。
ヘッダー部分に関してはうまくいっているように見えますが。

それ以外の部分だと、今回の質問とはまた別の話になりますので、新規に質問を立ててください。

[youyouy]

昨夜、アップするとCSSがきいてないのか、、、レイアウトが壊れていたのですが。今日あらためてアップしてみるとパソコン通りになってました！！よくわかりませんが、結果オーライでうまく行きました。どうもわからないところもあるのですが、今回とても勉強になりました。hatena19さんと知り合えたことがよかったです！またわからないところが出て来ると思いますので、今後共宜しくお願い致します！！

[hatena19]

キャッシュが残っていたのでしょうね。よくあることです。
更新が反映されない場合は「スパーリロード」するといいですよ。
検索してみください。