【配布共有テンプレート改造Tips】記事からはみ出した画像をなんとかしたい。

2014/01/10(金) 09:53:01：記事の固定リンク

例えば、私が以前作ったテンプレートなんですが、画像が凄くはみ出てデザインがおかしくなってしまっています。

ブログに貼り付けている画像がテンプレートの設定枠よりはみ出している場合、上記の画像のようにはみ出すか、画像に合わせてカラム幅が広がってしまいデザインが大幅に崩れるか、もしくは、

上記画像のように、途中でブッツリ切れてしまうと思います。

・

コレは、スタイルシートで指示している「はみ出た画像の処理の仕方」によるものです。一枚目の状態のような時は、

overflow:visible;

状態で、はみ出した部分をそのまま表示させています。

二枚目のケースは、

overflow:hidden;

で、はみ出した部分を隠しています。

・

ちゃんと画像を全部入れて、なおかつレイアウトを崩さないようにするには、画像を自動的に記事の部分の幅に合わせて表示させるのが一番だと思います。
なので、スタイルシートの「幅」の要素を以下のように記述します。今回は、記事部分のプロパティが「id="inbox"」だとして書いてます。

#inbox img{max-width:100%}

画像を、記事部分の幅に合わせて縮小するという指示です。これで、記事の幅より画像が大きくても、綺麗におさめることが可能です。