みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。
CMS (Movable Type)でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。
どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか?宜しくお願いします。

投稿日時 - 2008-06-13 23:24:26

QNo.4098747

すぐに回答ほしいです

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

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>

投稿日時 - 2008-06-14 00:00:26

お礼

ありがとうございます。
いろいろ、試行錯誤しているうちに、height:auto;が抜けてしまってたようです。初歩的なミスで申し訳ございません。

ちなみに、IE6はminmax.jsを使って対応させているんですが、
http://www.doxdesk.com/software/js/minmax.html
height:auto;を加えれば縦長にはならないんでしょうか?
一応、↓このサイトで確認はして大丈夫なんですが、少し心配で・・・。
http://ipinfo.info/netrenderer/index.php

投稿日時 - 2008-06-14 10:31:42

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問