Как я могу увеличить HTML-элемент в Firefox и Opera?

82

Как я могу увеличить HTML-элемент в Firefox и Opera?

В zoomСвойство работает в IE, Google Chrome и Safari, но это не работает в Firefox и Opera.

Есть ли способ добавить это свойство в Firefox и Opera?

css firefox cross-browser zoom opera САБУ
источник
1
Я бы отослал вас к этому вопросу, который довольно подробно отвечает на ваш.
Бен

Ответы:

80

Попробуйте этот код, это сработает:

-moz-transform: scale(2);

Вы можете сослаться на это .

Mubeen
источник
2
Я., это отлично работает. Есть ли способ изменить коэффициент масштабирования -moz-transform на процент
Это процент в десятичной форме. (1 = 100% 2 = 200% 0,2 = 20%) Но я считаю, что вы также можете использовать процентное обозначение. w3.org/TR/css3-values/#percentages
sholsinger
47
Проблема с этим, когда у вас есть фиксированные элементы положения. Масштабирование работает иначе, чем масштаб трансформации.
Том Роггеро
3
Также ... что происходит, когда ff поддерживает масштабирование? Будет ли это двойным зумом? Это не похоже на решение imo.
Кори Мохортер
это не работает с изображением спрайта, хотя нам действительно нужно увеличить определенную часть изображения.
Колин Рикелс
53

Масштабирование и масштабирование - это не одно и то же. Применяются в разное время. Масштаб применяется до рендеринга, трансформация - после. Результатом этого является то, что если вы возьмете div с шириной / высотой = 100%, вложенный внутри другого div с фиксированным размером, если вы примените масштабирование, все внутри вашего внутреннего масштабирования будет сжиматься или расти, но если вы примените преобразование всего внутренний div будет сжиматься (даже если ширина / высота установлена ​​на 100%, они не будут 100% после преобразования).

Илья Володин
источник
35

Для меня это работает, чтобы противостоять разнице между масштабированием и масштабным преобразованием, отрегулировать желаемое происхождение:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;
Расс К.
источник
8

Используйте scaleвместо этого! После многих исследований и тестов я сделал этот плагин кроссбраузерным:

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege:

$(selector).scale(0.5);

заметка:

Он создаст оболочку с классом scaleContainer. Позаботьтесь об этом при стилизации контента.


источник
Вы можете сделать это еще более крутым, управляя шириной границы масштабированного элемента ...width($(this).data('originalWidth') * x + borderWidth)
umutesen
5 
zoom: 145%;
-moz-transform: scale(1.45);

используйте это, чтобы быть в большей безопасности

Дивам Гупта
источник
10
Это увеличивает масштаб в 2 раза в webkit. Кулак по зуму, второй по шкале
Алесь Ружичка
5

Я бы изменил zoomдля transformвсех случаев, потому что, как объясняется другими ответами, они не эквивалентны. В моем случае также необходимо было применить transform-originсвойство, чтобы разместить предметы там, где я хотел.

Это сработало для меня в Chome, Safari и Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
Альваро
источник
1

Он не работает одинаково во всех браузерах. Я зашел по адресу : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage и добавил стиль для масштабирования и -moz-transform. Я запустил один и тот же код в Firefox, IE и Chrome и получил 3 разных результата.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>
Ронни Шерер
источник
1

Я долго ругался на это. Zoom - это определенно не решение, он работает в хроме, он частично работает в IE, но перемещает весь html div, firefox ничего не делает.

Мое решение, которое сработало для меня, заключалось в использовании как масштабирования, так и перевода, а также добавления исходной высоты и веса, а затем установки высоты и веса самого div:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Очевидно, измените их под свои нужды. Это дало мне одинаковый результат во всех браузерах.

WtFudgE
источник
Это единственно правильный ответ! Только масштабирование оставляет неизменным исходный размер элемента.
Honza Zidek
1

попробуйте этот код, чтобы увеличить всю страницу в fireFox

-moz-transform: scale(2);

если я использую этот код, вся страница, масштабируемая с помощью прокрутки y и x, не масштабируется должным образом

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Просто вы не можете масштабировать страницу с помощью css в fireFox

**

Ризо
источник
0

это работает правильно для вас? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
Т. Тодуа
источник
0

Для меня это хорошо работает с IE10, Chrome, Firefox и Safari:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

Это увеличивает все содержимое до 50%.

Камень
источник
0

Единственный правильный и совместимый с W3C ответ: <html> object и rem. преобразование не работает правильно при уменьшении масштаба (например, scale (0.5).

Использование: 

html
{
   font-size: 1mm; /* or your favorite unit */
}

и используйте в своем коде "rem" (включая стили для <body>) вместо метрических единиц. "%" s без изменений. Для всех фонов установите размер фона. Определите размер шрифта для тела, наследуемого другими элементами.

если возникает какое-либо условие, которое должно запускать масштабирование, отличное от 1.0, измените размер шрифта для тега (через CSS или JS).

например:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

Это эквивалентно масштабированию: 0,5 без проблем в JS с clientX и позиционированием во время событий перетаскивания.

Не используйте rem в медиа-запросах.

Вам действительно не нужно масштабирование, но в некоторых случаях это может быть более быстрый метод для существующих сайтов.

18C
источник