下記のような画像とdivのボックスがあります。画像の最大値を500pxにしてレスポンシブにしたいのですが、うまくいかず困っています。
<div class="Box">
<img src="http://www.example.com/sample.jpg" width="400" height="600">
</div>
このようなCSSを作ってみたのですが、高さは500pxになり、横幅も比率を維持して表示されるのですが、レスポンシブになりません。
[CSS]
img {
width:auto;
max-height:500px;
}
.Box{
max-height:500px;
clear:both;
}
ご回答お願い致します。
No.1ベストアンサー
- 回答日時:
まるでレスポンシブとは無縁の問題ですね。
レスポンシブにするときは、デバイスの幅や解像度で振り分けて別のスタイルシートを適用させます。
レスポンシブでなくリキッドでしたら、500pxのように高さを固定せずに、直近のスタティック以外の親ブロックの高さを基準にして%指定をします。
[補足]
★なお、div要素はそのような使い方をしてはなりません。
・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
この場合は単に
<p class="MainPhoto"><img src="" width="" height=""></p>
とか・・
★セレクタを書くときは基点セレクタを書くように
header p.mainPhoto{}
詳細度が分かりやすくなり衝突が避けられる。
ORUKA1951様
ご回答ありがとうございます。
divなどの文書構造なども教えていただいたページをよく見て勉強していきたいと思います。
セレクターの書き方までアドバイス頂き感謝致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
子孫セレクタの読み方をおしえ...
-
スタイルシートで、id属性の中...
-
日毎にページデザインをローテ...
-
最近、HTMLのヘッダーをIDで定...
-
CSSのクラス名・ID名の指定でワ...
-
文字の背景色をつけるには?
-
Bootstrap 訪問済みテキストリ...
-
classとidの名前の付け方
-
サイトにjQueryが使用されてい...
-
idの中のid指定
-
レスポンシブデザインのテンプ...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
liタグの中に<p>タグやら<dl>を...
-
【ヒトの神秘】美男美女から何...
-
ホームページビルダー19SPで...
-
リストマーカーをボックス内に...
-
widthやheightの数値に単位(px...
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
<span>で2重にかけているものを...
-
外部css定義したclassをht...
-
CSSに同じclass名がいっぱい‥。...
-
子孫セレクタの読み方をおしえ...
-
liリストタグの背景色に色がつ...
-
「目次」と「サブ目次」のスタ...
-
【VBA/HTML】IE画面内のページT...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
ページの左右の余白(枠外)に...
-
透過背景を解除するにはどうす...
-
divでくくった中の要素にa link
-
brにクラスをつけてcssでdispla...
おすすめ情報