画像の横幅が圧縮されてしまう場合はmin-widthを確認せよ!

ブログに画像をアップロードした際に、横幅が圧縮されて困ったこと、ありませんか?

1024×768の画像で、width=1024 height=768に設定しているのにもかかわらず、横幅がつぶれてます。

firefox3

知ってる人は知ってるとおもいますが、これはスタイルシートのmax-widthが指定されているからです。スタイルシートのmax-widthが指定されていると、width属性を指定してもmax-widthが優先されてしまいます。これは、デザインが崩れないようにするためには合理的なのですが、どうしても、なにがなんでも、でっかい画像を張りたいということもあると思います。

そういうときは、min-widthを設定すると潰れずに表示されます。min-widthによる制約が、max-widthよりも優先され、min-widthで指定したサイズで表示されるのです。

firefox3

merginにマイナス値を設定すると、右側の部分を表示させることもできます。

firefox3

Facebookページもよろしくお願いします

CATEGORIES eラーニングby.yasu.tanaka0 Comments2009.11.09
TAGS , ,  
記事の投稿者
田中 康英
eラーニング支援部です。ときにメールマガジンを書き、ときにブログを書き、ときにソフトを翻訳し、ときに問い合わせに返信し、ときにUstreamスタジオの準備をし、とそんな感じでお仕事しています。

Facebook comments:

コメントをどうぞ

Eメールアドレスは公開されません。

Trackback URL

管理者の承認後に表示します。無関係な内容や、リンクだけで意見や感想のないものは承認しません。