max-width属性で横幅を指定する

By nakayama - 10/03/22 -

携帯から投稿された画像を一定の幅以上大きく見せたくない場合があります。
携帯で見せる場合だと画像はプログラムでリサイズするのですが、
PC限定でcssのmax-widthを使ってもう少し簡単に実現する方法があります。

max-widthを設定しない場合

<div style="background-color:#99FFFF;">
ああああああああああああああああああああああああ
<img src="http://www.plusmb.jp/wp-content/uploads/2010/03/selvagif.gif">
</div>

ああああああああああああああああああああああああ

max-widthを設定した場合

<div style="max-width:240px;background-color:#99FFFF;">
ああああああああああああああああああああああああ
<img src="http://www.plusmb.jp/wp-content/uploads/2010/03/selvagif.gif" style="max-width: 200px;">
</div>

ああああああああああああああああああああああああ

IE6の場合

ただIE6ではmax-width属性が使えません。しかし解決するためのjsライブラリがあります。
『minmax.js』
使い方は簡単でHTMLソース内でライブラリを読み込むだけです。
これだけでIE6でもmax-widthと同じ効果を発揮します。

<script type="text/javascript" src="minmax.js"></script>
<div style="background-color:#99FFFF;">ああああああああああああああああああああああああ</div>

IE8の場合

但しこの『minmax.js』はIE8で見た場合エラーになってしまいますので、ダウンロードしたファイルを修正する必要があります。
36行目の

if (em.style.setExpression) {
    em.style.setExpression('width', 'minmax_checkFont()');
    document.body.insertBefore(em, document.body.firstChild);
}

を下記に変更

if (em.style.setExpression) {
   try {
       em.style.setExpression('width', 'minmax_checkFont()');
       document.body.insertBefore(em, document.body.firstChild);
    }
    catch(err){}
}

これでエラーも出なくなります。