質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 420

score 1

前提・実現したいこと

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

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

イメージ説明
パソコン画面では”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;
}

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hatena19

    2021/03/28 14:40

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

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

    キャンセル

回答 1

checkベストアンサー

+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サンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/03/30 22:33

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

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

    キャンセル

  • 2021/03/31 18:12

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

    キャンセル

  • 2021/03/31 22:05

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る