position:absoluteした要素に可変の高さを与える - Qiita
追記 なんか1年くらいかかりはしましたが2万viwe超えました。 他の記事なんか1000にも満たないことが多いので驚きです。 よく検索されているようなのでもしわかりにくいことがあればコメントください。 本題 positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。 これは高さを指定しないから起こるのだが、 高さ固定したらそもそもdivの中の画像が伸縮しなくなるじゃん！！ こんな場面に出会った人は少なくないはず、多分。 どうにかなります .box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法｜BLACKFLAG
以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 （左右のNEXT／BACK透過ボタンで画像を切り替えることも可。） サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 対象のベースの要素がIDでもクラスでも可能になっているので、1ページ内に複数設置の際にはクラスを使用することで、複数設置することが可能になっています。 1ページ内に2つのクロスフェードビューアーを設置して、それぞれにキャプションを付けた形でのサンプルは以下の様になります。 複数設置＆キャプション付きサンプルを別枠で表示 凝った演出などはありませんが、シンプルに画像などを切り替えるだけの動作が必要な際に手軽に使えると思います。 クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。 サンプルファイルをダウンロードしたい方はこちらから
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
