Q&A
ただいま、レスポンシブデザイン中です。
widthが767px以下になったらメイン画像が可変するようにしたいのですがうまくいきません・・・。
よく、
img{ width:100%; max-width:100%; height:auto; }
にしたら良いと色々書いてあったので以下のように試みましたがメイン画像が縮小されませんでした・・・。
ひよっこなもので教えていただけるとありがたいです。
こちらがHTMLです。 <div id="header"> <p><img src="img.jpg" width="1366" height="949" alt=""></p> </div>
PC用CSSはこちら #header{ width: 100%; height: auto; } #header p img{ width: 100%; height: auto; }
レスポンシブ用のCSSがこちらです。 @charset "UTF-8"; /*メディアクエリ設定（※widthが767px以下の場合にCSSを適用する）*/ @media screen and (max-width:768px){ #header{ width: 100%; } /*画像サイズの設定*/ #header p img { max-width: 100%; height: auto; width: auto;/*IE8のみに適応*/ } }
なぜなのでしょうか？
どなたか教えていただけるとありがたいです。
回答3件
0
width="1366" height="949"
imgタグにサイズが指定されているからではないでしょうか？
投稿2017/06/21 04:41
総合スコア137
0
ベストアンサー
すません、やりたいことのイメージがコードからは読み取れないんだけど、こんなかんじ？？
https://codepen.io/anon/pen/LLyEgg
※ ブラウザの画面幅変えてためしてみてね。
投稿2017/06/20 12:17
総合スコア824
0
一度、あなたのCSSとHTMLを削除してください。
そして、私のHTMLとCSSに置き換えてください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="keywords" content=""/> 7 <meta name="description" content=""/> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 9 <link rel="stylesheet" type="text/css" href="スタイルシートを指定してください" media="all"> 10</head> 11<body> 12<div id="header"> 13 <p><img src="好きな画像に置き換えてください" alt=""></p> 14</div> 15</body> 16</html>
CSS
1img { 2 max-width: 100%; /* 縦横比を維持したまま自動的に画像が拡大・縮小します */ 3 vertical-align: middle; /* 画像の下に入る余白を削除 */ 4}
投稿2017/06/20 10:51
編集2017/06/20 10:56
総合スコア204
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。