0

Web サイト テンプレートを開発していて、ギャラリー ライトボックス プラグインに問題があることを発見しました。http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html

ギャラリーに複数の画像がある場合、ライトボックスは問題なくレンダリングされますが、画像が 1 つしかない場合、大きな画像ラッパーは画像よりも小さくなります。問題の原因を特定しました。このテンプレートは Foundation 3.0 フレームワークを使用しているため、foundation.min.css ファイルの最初のセレクターが問題を引き起こしています。

"    * {
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      }

これを削除しようとしたところ、問題は解決しましたが、ウェブサイト全体が壊れてしまいました。ここにどのコードを貼り付ければよいかわかりません。必要に応じて、すべてのテンプレート ファイルをダウンロードするためのリンクを投稿できます。ありがとうございました！

4

1 に答える 1

1

このコードを変更しないでください。代わりに、ラッパーの css を変更してください。あなたが投稿したコードのスニペットは、幅の計算に境界線とパディングを含めるようにすべての要素に指示しています。したがって、10 ピクセルのパディングと 5 ピクセルの境界スペースがあり、幅が 200 ピクセルのボックスは、実際には 200 ピクセルの幅です。このコードがないと、ボックスの実際の幅は 230px になります。

あなたはこれを行うことができます...

クラスに追加lightbox-outer- overflow: hidden.

.lightbox-outer {
overflow: hidden;
}

これは機能しますが、画像の一部を非表示にします。ボックスが画像のサイズに合わせたくないようです。

特定の比率を設定しているライトボックスの設定はどこにありますか?

EDIT2：私が見つけた何か、クラス.lightbox-skinから「幅」を削除すると、再び動作を開始します。問題は、この幅が要素のインラインに動的に適用されることですか?

于 2013-05-10T17:19:38.720 に答える