• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：max-widthを指定した場合の縦サイズのリサイズ方法）

max-widthを指定した場合の縦サイズのリサイズ方法

このQ&Aのポイント
  • 画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。
  • CMSでサイトを構築しており、ブログ記事の本文に画像を挿入する際に、widthとheightが指定されているため、max-widthを指定すると画像が縦長になってしまいます。
  • 縦横比率を変えずに縦のサイズを自動でリサイズする方法をご教示いただけませんか？
  • ys_ap
  • お礼率100% (2/2)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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>

ys_ap
質問者

お礼

ありがとうございます。 いろいろ、試行錯誤しているうちに、height:auto;が抜けてしまってたようです。初歩的なミスで申し訳ございません。 ちなみに、IE6はminmax.jsを使って対応させているんですが、 http://www.doxdesk.com/software/js/minmax.html height:auto;を加えれば縦長にはならないんでしょうか？ 一応、↓このサイトで確認はして大丈夫なんですが、少し心配で・・・。 http://ipinfo.info/netrenderer/index.php

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

SDカードの保証期間は何年？データ復旧の費用はどのくらいかかる？
このQ&Aのポイント
  • 購入したMF-SP128GU11A2R(microSDカード)の保証期間が気になります。
  • SDカードが読み取れなくなったため、データ復旧サービスの利用を考えています。
  • 担当の方には保証期間は1年と言われましたが、パッケージには2年と書かれています。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する