CSS レスポンシブ縦画像で縦の最大値を指定する方法

下記のような画像と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 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/08/29 16:56

まるでレスポンシブとは無縁の問題ですね。

レスポンシブにするときは、デバイスの幅や解像度で振り分けて別のスタイルシートを適用させます。
　レスポンシブでなくリキッドでしたら、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などの文書構造なども教えていただいたページをよく見て勉強していきたいと思います。
セレクターの書き方までアドバイス頂き感謝致します。

お礼日時：2015/08/30 04:42