5

私はhttp://lokeshdhakar.com/projects/lightbox2/を使用しています。私は画像のサムネイルを持っていて、それらをクリックするとライトボックスで開きます-明らかに。

私が抱えている問題は、それらの画像の一部が1800x1200の場合、ライトボックスがWebページ全体をカバーすることです。

画像が最大の高さ、たとえば400pxで、幅が比例するように編集するにはどうすればよいですか？ユーザーがアップロードした画像であるため、低次元の画像を単純にアップロードすることはできません。そのため、このスクリプト/サーバー側で行う必要があります。

ありがとう！

4

3 に答える 3

3

max-width画像とライトボックスの両方でおよびmax-heightCSSプロパティを使用できます。

デモ： http： //jsfiddle.net/rdfAV/1/

CSS：

img {
    max-width: 400px;
    max-height: 400px;
}

.lb-outerContainer, .lb-dataContainer {
    max-width: 420px;
    width: auto!important;
    height: auto!important;
}​

この方法は、すべての主要なブラウザと互換性があるようです。完全な互換性リストは、http：//caniuse.com/#feat=minmaxwhで入手できます。

于 2012-10-30T02:44:18.207 に答える
0

CSSに以下を追加してみてください。

 .lb-image{
      max-width: inherit;
  }
于 2016-06-15T06:21:14.683 に答える
-1

たくさんありがとう..本当に私のランディングページに完全に助けてください

いくつかの編集されたコード、賢くプレイ

img {
max-width: 800px;
max-height: 600px;
}

.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​
于 2014-10-30T22:04:14.017 に答える