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

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

76 голосов
/ 29 октября 2010

Как увеличить масштаб HTML-элемента в Firefox и Opera?

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

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

Ответы [ 12 ]

75 голосов
/ 29 октября 2010

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

-moz-transform: scale(2);

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

49 голосов
/ 12 декабря 2012

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

33 голосов
/ 09 декабря 2013

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

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;
8 голосов
/ 25 марта 2014

Используйте 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);

note:

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

4 голосов
/ 22 августа 2016

Я бы изменил 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;
4 голосов
/ 29 мая 2012 
zoom: 145%;
-moz-transform: scale(1.45);

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

1 голос
/ 01 апреля 2019

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

-moz-transform: scale(2);

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

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

**

Просто вы не можете увеличить свою страницу, используя CSS в FireFox

**

1 голос
/ 08 февраля 2012

Не работает единообразно во всех браузерах. Я пошел к: 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>
0 голосов
/ 14 июля 2017

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

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

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

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

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

например: 

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

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

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

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

0 голосов
/ 29 февраля 2016

Я давно клянусь в этом.Zoom определенно не является решением, он работает в Chrome, частично работает в IE, но перемещает весь HTML-файл, 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;

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

Страница:
...