eラーニングをすべての人に！blog.eラーニング.co.jp

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

1024×768の画像で、width=1024 height=768に設定しているのにもかかわらず、横幅がつぶれてます。
<a href=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg”><img src=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg” alt=”firefox3″ title=”firefox3″ width=”1024″ height=”768″ class=”aligncenter size-full wp-image-1913″ /></a>

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

そういうときは、min-widthを設定すると潰れずに表示されます。min-widthによる制約が、max-widthよりも優先され、min-widthで指定したサイズで表示されるのです。
<a href=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg”><img style=”min-width:1024px” src=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg” alt=”firefox3″ title=”firefox3″ width=”1024″ height=”768″ class=”aligncenter size-full wp-image-1913″ /></a>

merginにマイナス値を設定すると、右側の部分を表示させることもできます。
<a href=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg”><img style=”margin: 0 -424px ;min-width:1024px” src=”http://blog.elearning.co.jp/wp-content/uploads/2009/11/firefox3.jpg” alt=”firefox3″ title=”firefox3″ width=”1024″ height=”768″ class=”aligncenter size-full wp-image-1913″ /></a>