- 締切済み
CSS での画像サイズの上限設定法(自動縮小と併用
多数の画像を一つの外部ＣＳＳファイルで管理していますが、 画面を越えるサイズの画像を表示させるため img { width: 80%; } と一括して指定しています。 ところが、大きくブラウザ画面を拡大した場合には、 画像が原寸以上に見苦しく引き伸ばされてしまいます。 画像表示の上限を設定するために、 max-width: を用いた場合には、何百枚もの多数の画像に対して 一つずつ px 数値を入力する以外に解決法が分かりません。 なるべく簡単な方法で、こうしたトラブルを解決する方法をお願いいたします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問の意味が分かりません。 ＞画像表示の上限を設定するために、max-width: はウィンドウ幅についての指定ですか?img要素についてですか？ 文書構造が分かりませんが、style属性においてmax-widthを指定しておけば、詳細度は1,0,0,0になりますから、他所でどのように指定しようとそれ以上は拡大されません。画像にはすべてwidth属性が指定されている(詳細度は0,0,0,0)はずですから、適当なテキストエディタで width="(\d+)" ↓ width="\1" style="max-width:\1" とすればよい。 例えば、 HTML4.01でしたら div.section div.albam{ width:80%;margin:0 auto; position:relative; border:solid 1px gray; } div.section div.albam ul{list-style:none;margin:0;padding:0;} div.section div.albam ul li{ float:left; position:relative; width:100%; } div.section div.albam ul li img{ display:block; width:49%;height:auto; } div.section div.albam ul:after{ content:"";display:block;clear:left; } HTML5でしたら section section.albam{ width:80%;margin:0 auto; position:relative; border:solid 1px gray; } section section.albam ul{list-style:none;margin:0;padding:0;} section div.albam ul li{ float:left; position:relative; width:100%; } section section.albam ul li img{ display:block; width:49%;height:auto; } section section.albam ul:after{ content:"";display:block;clear:left; } とか、本文(section)中のアルバムブロック(が親コンテナブロック)中のリスト内の画像は、statocではない直近の親コンテナブロックのサイズを参照します。 ★タブは＿に置換してあるので戻す。 [HTML4.01の例] <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="albam"> ＿＿＿<ul class="alubam"> ＿＿＿＿<li><img src="./images/01.gif" style="max-width:80px" width="80" height="60" alt="画像1"></li> ＿＿＿＿<li><img src="./images/02.jpg" style="max-width:200px" width="200" height="200" alt="画像1"></li> ＿＿＿＿<li><img src="./images/03.jpg" style="max-width:240px" width="240" height="180" alt="画像1"></li> ＿＿＿＿<li><img src="./images/04.jpg" style="max-width:480px" width="480" height="360" alt="画像1"></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> [HTML5] <body> ＿<header> ＿＿<h1>見出し</h1> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<section class="albam"> ＿＿＿<ul class="alubam"> ＿＿＿＿<li><img src="./images/01.gif" style="max-width:80px" width="80" height="60" alt="画像1"></li> ＿＿＿＿<li><img src="./images/02.jpg" style="max-width:200px" width="200" height="200" alt="画像1"></li> ＿＿＿＿<li><img src="./images/03.jpg" style="max-width:240px" width="240" height="180" alt="画像1"></li> ＿＿＿＿<li><img src="./images/04.jpg" style="max-width:480px" width="480" height="360" alt="画像1"></li> ＿＿＿</ul> ＿＿</section> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿</footer> </body>
