- ベストアンサー
max-widthを指定した場合の縦サイズのリサイズ方法
- 画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。
- CMSでサイトを構築しており、ブログ記事の本文に画像を挿入する際に、widthとheightが指定されているため、max-widthを指定すると画像が縦長になってしまいます。
- 縦横比率を変えずに縦のサイズを自動でリサイズする方法をご教示いただけませんか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
max-widthはIE6は対応してないはず。ってのは当然として。 http://www.w3.org/TR/CSS21/cascade.html#preshint width属性やheight属性は詳細度0(つまり最も優先度が低いもの)として扱われる。 手元のソースコードでは style要素内で改めて height:auto;を書き加えることで横長の長方形として表示された。 (元々、用意したのは500*200の横長長方形の図形。比率があっているかは確認していない) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>Q4098747 TestCase 1</title> <style type="text/css"> img{ max-width:400px; height:auto; } </style> </head> <body> <h1>アンケート調査</h1> <p><img src="Q4098747-1.png" width="600" height="400"/></p> <p style="width:500px;background-color:green;">あああ</p> <p style="width:400px;background-color:purple;">いいい</p> </body> </html>
お礼
ありがとうございます。 いろいろ、試行錯誤しているうちに、height:auto;が抜けてしまってたようです。初歩的なミスで申し訳ございません。 ちなみに、IE6はminmax.jsを使って対応させているんですが、 http://www.doxdesk.com/software/js/minmax.html height:auto;を加えれば縦長にはならないんでしょうか？ 一応、↓このサイトで確認はして大丈夫なんですが、少し心配で・・・。 http://ipinfo.info/netrenderer/index.php