CSS3 background-size и background-position issue

Question

Я программирую небольшую тему WP и нуждаюсь в небольшой помощи с новым свойством CSS3 background-size.

У меня есть DIV, который содержит изображение в качестве фона. Само изображение устанавливается больше, чем DIV представить небольшой вырез исходного изображения:

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

До сих пор все нормально. Но вызов свойства background-position становится сложным, если размер ≥ 100%. я собрал немного JS/CSS площадка для тестирования:

• Если изображение ≤ 99% в ширину, меньше фона позиционно-х означает, что изображение уходит влево.
• Если изображение == 100% широкое, background-position-x ничего не делает
• Если изображение ≥ 101% в ширину, меньше фона-позиции-x означает, что изображение направо.

В следующем случае я Рассчитано:

• Большой контейнера: 350x350px
• Изображение: 540x359px
• означает: (100/350) * 540 ≙ 154% ширины
• (100/350) * 359 ≙ 102% высоты.
• также: позиционно-х: -28% и позиционно-у: (. Вкл автоматические расчеты) -0,28%

Так что я вынес страницы и размер нужного размера. Но, как я уже сказал, меньшее значение background-position-x (-28%) означает, что изображение идет правильно, изображение имеет неправильное положение.

Его нужно было бы сдвинуть влево, потому что я вычислил -28% «левое поле». Поэтому я сделал несколько проб и ошибок, и оказалось, что правильная позиция будет примерно на 50%.

Является ли это еще проблемой CSS3, или это мое полное непонимание функциональности этого свойства?

EDIT:here is an JSFiddle too

Вот картинка, чтобы проиллюстрировать свою цель ...

Answer 1

Ключ к вашим проблемам в том, что процент, который вы укажете дает точку, где контейнер и матч изображение . Эта точка рассчитывается как на изображении, так и в контейнере.

Итак, если вы хотите, чтобы изображение было центрированным, это означает, что центр изображения находится в центре контейнера. Таким образом, это значение, которое вы найдете в результате проб и ошибок.

Ключевым моментом здесь является 50% в качестве фона позиции всегда получает изображение по центру, и вам не нужны какие-либо из ваших расчетов

Если указать 10% для имущества, что будет означать, что точка в 10% слева на изображении расположена в точке на 10% слева в контейнере.

формула для этого

Как конвертировать из процентов к рх (по запросу). Предположим, что у вас есть контейнер o размер n и изображение больше по коэффициенту f Указывает фоновая позиция x%. Мы принимаем это как унитарного фактора будучи а = х * 100

Положение, чтобы соответствовать в контейнере . Позиция, которая должна соответствовать изображению, равна afn. Положением изображения из контейнера является разница, afn-a, который может быть указан как a (f-1).

Это объясняет, почему:

Кажущаяся результат свойства инвертируется при F> 1. (Изображение больше, чем контейнер.

Результат равен нулю, когда F = 1 (изображение имеет тот же размер, чем контейнер)

Теперь, чтобы преобразовать, что в пространстве процент, вы просто разделить по размеру контейнера (п), чтобы дать

A (F-1)

или разделить на размер изображения (Fn), чтобы дать

а (е-1)/ф