3

この質問は以前にここで尋ねられたようですが、質問者は prettyPhoto に切り替えることで自分の質問を解決しました。理解するために、なぜこれが起こっているのかを理解したいのですが、解決策がないように思われる場合は切り替えます. 回答の1つに記載されているように、設定もありますがoverflow:hidden、画像を切り取るのではなく、ボックスのサイズを変更できないかどうか疑問に思っています。

このstackoverflowの記事で説明されているように、パッチを適用したfancybox 1.3.4を使用しています。

私が使用しているすべてのファイル (css、js、画像) は、fancybox zip に付属しており、アセット パイプラインにあり、レールで画像を適切に使用するために css ファイルの画像パスを変更する以外は変更されていません。 ' rails image-url ヘルパーを使用したアセット パイプライン。CSS を投稿することはできますが、役に立つとは思いません (間違っている可能性があります)。Rails 4 に付属の jQuery を使用しています。

DOCTYPE は html です。

私の application.js ファイルは次のようになります。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.easing-1.3.pack
//= require jquery.fancybox-1.3.4

$(document).ready(function(){
  $("a.image-gallery").fancybox({
    'width': 640,
    'height':480,
    'autoScale':true,
    'autoDimensions':false
  });
});

しかし、ライトボックス ギャラリーに入れた画像は、ライトボックスの右側からはみ出しています。ここで、Firefox 25 で私が話していることを確認できます。最初の 2 つの画像のいずれかをクリックして、この問題を確認してください。

参考までに、私の画像は 640x480 の png です。

この問題を修正するには、どのような手順を実行できますか?

4

4 に答える 4

12

style.cssファイルには、有名なbox-sizing css ルールがあります。

* {
    -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
         box-sizing: border-box;
}

ファンシーボックスのレイアウト（の古いバージョン）を台無しにしているようです：DEMO

回避策は、fancybox 要素のみに戻すbox-sizingことで、一般的な宣言の後にこの css ルールを適用します。content-boxbox-sizing

#fancybox-wrap, #fancybox-wrap *{
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}

デモ固定

注: これは fancybox v1.3.x 以前にのみ適用されます。Fancybox v2.x にはこの問題はありません。

于 2013-11-12T05:09:32.297 に答える
0

私はこの同じ問題を抱えていました..

これをスタイルシートに入れます。

.fancybox-inner img{

max-width: 100%;

}

于 2014-07-03T17:44:29.550 に答える
0

私の場合、選択した回答は問題を完全には解決しませんでしたが、実際には出発点として機能しました。私は次のルールに行き着きました：

#fancybox-wrap, #fancybox-outter, #fancybox-content {
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}
#fancybox-content > div {
  margin-top:    -20px;
  margin-bottom: -20px;
}

内部のすべての要素のボックス サイズを元に戻すと、 Bootstrap3#fancybox-wrapのレイアウトが壊れてしまうため、もう少し選択的に元に戻しました。

そして、なぜか上下の枠線とコンテンツの間に余白ができてしまい、余白ルールで修正されていました。すべてのシナリオに当てはまるかどうかはわかりません。

于 2014-03-11T16:25:48.473 に答える