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

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

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

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

ОТВЕТЫ

Ответ 1

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

-moz-transform: scale(2);

Вы можете обратиться к this.

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

-moz-transform: scale(2);

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

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

**

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

**

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

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

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

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

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

Ответ 13

Я попытался обернуть родительский тег с display: inline-block; это работает в моем простом случае! это лучше, чем "transform: scale (.5)", как мне кажется, потому что оно меняет только изображение, но само пространство (ширину и высоту). Я не уверен в другом случае! попробуйте и ответьте пожалуйста!

<body>
    <div class="wrapper">
        <div class="retina-wrap">
            <img src="img.jpg">
        </div>
    </div>
</body>

.wrapper {
    width: 1000px; 
}

.retina-wrap {
    display: inline-block;
}

img {
    width: 50%;
}