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

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

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

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

11 69
css operating-system cross-browser firefox zoom

11 ответов:

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

-moz-transform: scale(2);

вы можете обратиться к этой.

71

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

42

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

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;
30

использовать 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);
};

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

$(selector).scale(0.5);

Примечание:

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

8
zoom: 145%;
-moz-transform: scale(1.45);

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

4

Я бы изменил 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;
3

он не работает одинаково во всех браузерах. Я пошел к:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage и добавлен стиль для масштабирования и-moz-преобразования. Я запустил тот же код на 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: 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

я ругался на это в течение некоторого времени. Zoom-это определенно не решения, он работает в chrome, он работает частично в 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;

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

0

только правильный и W3C совместимый ответ:<html> объект и 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; 
   }
}

это делает эквивалент zoom: 0.5 без проблем в JS с clientX и позиционированием во время событий перетаскивания.

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

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

0