Вопрос по css, webkit-transform, css3 – CSS Масштабирование элемента с шириной 100%

17

Я заинтересован в уменьшении div с шириной 100%. Проблема, с которой я столкнулся, заключается в том, что когда я масштабирую элемент, он получает фиксированную ширину и больше не расширяется на 100% ширины.

Пример -http://jsfiddle.net/Fz7qh/2/

Когда я использую CSS-свойство zoom (в отличие от transform: scale), оно работает как положено, но я слышал, что свойство zoom не очень хорошо поддерживается. Мой вопрос: это может быть достигнуто с помощью CSS transform scale?

CSSzoom собственность действительно плохо поддерживается. Ни Firefox, ни Opera не поддерживают это. thirtydot
Это то, что вы после?jsfiddle.net/thirtydot/Fz7qh/5 thirtydot
@thirtydot интересная идея. Кажется, работает. Опубликуйте это как ответ, чтобы я мог принять его levi

Ваш Ответ

1   ответ
43

zoom свойство в этом случае можно добавить-transform-origin: 0 0; и установитьwidth вoldWidth / newScale (100 / 0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}​
Я, если бы мог дать это два голосов, я бы
Я только добавилbox-sizing: border-box; также просто чтобы убедиться,padding также входит вwidth
как насчет высоты?
Интересно, почему некоторые люди принимают ответ, но не дают ему ответа ... Является ли ответ правильным, но недостаточно хорошим?
Хорошо, я выяснил: вам нужно добавить внешний элемент и масштабировать его в зависимости от масштаба, как здесьjsfiddle.net/v2fukeq5/11 (+ переполнение для неконстантной высоты).

Похожие вопросы