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

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

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

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

11 ответов


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

-moz-transform: scale(2);

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


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


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

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

использовать 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. Позаботьтесь об этом при стилизации контента.


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

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


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

не работает единообразно во всех браузерах. Я пошел к: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>

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

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

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

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

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


я ругался на это некоторое время. 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;

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


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

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

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

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

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

например:

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

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

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

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