2013年8月21日カテゴリー:未分類

CKeditorとレスポンシブWebデザイン(2):画像を配置するときの注意点

サーバーブラウザ等で画像をアップロードした後、イメージプロパティ画面が表示されます。

アップロードした画像のサイズが、「幅」と「高さ」に自動入力されますが、「幅」と「高さ」は空欄にします。
幅と高さを指定してしまうと、ブラウザが縮小された際、それに合わせて画像が縮小されなくなってしまいます。
レスポンシブWebデザインとしての機能が働きませんので、注意してください。

アップロードする画像は、大きめのものでも構いません。
ブラウザに合わせて縮小されて表示されます。
ただし、見た目の縮小ですので容量は変わりません。アップロードする前に、大きな画像は小さくするなど、画像の調整をしておくのがいいでしょう。

上図のように、幅と高さを空欄にして「OK」をクリックします。

CSS

[css]
#document_area img {
clear:both;
max-width:98%;
margin:1%;
}
[/css]