レスポンシブWEBデザイン 画像拡大

質問

お世話になります。

レスポンシブWEBデザインに対応していて、無料で使える商用利用可能な
拡大画像表示のlightboxみたいなプラグインを探しています。

ご存知の方、いらしたら教えてください。

よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

レスポンシブデザインにされるということは、その前に当然、リキッドデザインだと思います。
　リキッドデザインで、すでにディスプレイ(ウィンドウ幅)依存しないデザインになっているはずです。それでも640px以下だと利用しにくいために、はじめてレスポンシブでウィンドウ幅によってスタイルシートを切り替えているはずです。それによって、スマホの縦置きだろうが横置きだろうが、超幅広ディスプレイだろうが、たった一つのHTMLで対応可能となっているはずですよ。
　そのリキッドデザインの段階で、画像を伸縮させておけば良いです。通常はそうされているはずです。

　画像要素は、HTML/スタイルシート上は、[置換インライン要素]に分類されます。内容を含まない要素ですが、属性で指定された幅ないし、画像自体の幅で描画されます。
　これをdisplay:blockとすることで、直近のstaticでないブロック要素のサイズを参照できるようになります。
　⇒10.3 幅とマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_widths_and_margins )
　↑ここをしっかり理解しておくこと。

　static以外ですから、relative,absoluteなどの、直近の親コンテナブロックのサイズを元に%で指定できるようになるはずですよ。