4

小さな WP テーマをプログラミングしていて、新しい CSS3 background-size プロパティについて少し助けが必要です。

背景として画像を含む DIV があります。画像自体は div よりも大きく設定され、元の画像を少し切り取って表示します。

.imageContainer {
    background-size:154% 102%;
    background-position-x:-28%;
    background-position-y:0.28%;
}

これまでのところ、すべて問題ありません。ただし、サイズが 100% 以上の場合、background-position プロパティを呼び出すのは難しくなります。テスト用に小さな JS/CSS Playground をまとめました。

  • 画像の幅が 99% 以下の場合、background-position-x が小さいほど、画像は左に移動します。
  • 画像の幅 == 100% の場合、background-position-x は何もしません
  • 画像の幅が 101% 以上の場合、background-position-x が小さいほど画像が右に移動します。

次の場合、私は計算しました：

  • 大きなコンテナ: 350x350px
  • 画像: 540x359px
  • 意味: (100/350) * 540 ≙ 154% 幅
  • (100/350) * 359 ≙ 102% の高さ。
  • また: position-x: -28% and position-y: -0.28%

そこで、ページをレンダリングしました (自動計算を含む)。サイズはほぼ適切なサイズです。しかし、私が言ったように、background-position-x (-28%) が少ないということは、画像が正しく、画像の位置が間違っていることを意味します。

-28% の「左マージン」を計算したため、左に移動する必要があります。そこで、試行錯誤を繰り返した結果、正しい位置は 50% 前後であることがわかりました。

これはまだ CSS3 の問題ですか、それともこのプロパティの機能に対する私の完全な誤解ですか?

編集: ここにも JSFiddle があります

これが私のターゲットを説明するための写真です… ここに画像の説明を入力

4

1 に答える 1

4

問題の鍵は、指定したパーセンテージによって、コンテナーとイメージが一致するポイントが得られることです。このポイントは、イメージとコンテナーの両方で計算されます。

したがって、画像を中央に配置する場合は、画像の中心がコンテナーの中心にあることを意味します。したがって、これは試行錯誤して見つけた値です。

background-positionは常に画像を中央に配置するため、ここでのキーは 50%であり、計算は必要ありません。

プロパティに 10% を指定すると、イメージの左から 10% のポイントがコンテナーの左から 10% のポイントに配置されることを意味します。

この式

パーセンテージから px への変換方法 (要求に応じて)。サイズnのコンテナーがあり、画像がf倍大きいとします。背景位置をx % に指定します。これをユニタリ因数aとして、a=x*100とします。

コンテナ内で一致する位置は. 画像で合わせる位置はafnです。コンテナーからのイメージの位置は、an(f-1)として指定できる差afn-anです。

その理由は次のとおりです。

f > 1 の場合、プロパティの見かけの結果は反転します。（画像はコンテナよりも大きいです。

f = 1 の場合、結果は nil です (画像はコンテナーと同じサイズです)。

これをスペースのパーセンテージに変換するには、コンテナーのサイズ ( n )で割ります。

a(f-1)

または、画像のサイズ(fn)で割り、

a(f-1)/f

于 2013-02-23T19:39:14.563 に答える