Jak mogę powiększyć element HTML w Firefoksie i Operze?

Question 1

zoomObiekt działa w IE, Google Chrome i Safari, ale to nie działa w Firefox i Opera.

Czy istnieje metoda dodania tej właściwości do przeglądarek Firefox i Opera?

Question 2

Wypróbuj ten kod, to zadziała:

-moz-transform: scale(2);

Możesz się do tego odnieść .

Question 3

Zoom i skala transformacji to nie to samo. Są stosowane w różnym czasie. Powiększenie jest stosowane przed renderowaniem, transformacja - po. Rezultatem tego jest to, że jeśli weźmiesz element div o szerokości / wysokości = 100% zagnieżdżony w innym div, ze stałym rozmiarem, jeśli zastosujesz powiększenie, wszystko w wewnętrznym powiększeniu zmniejszy się lub zwiększy, ale jeśli zastosujesz, przekształć cały wewnętrzny div zmniejszy się (nawet jeśli szerokość / wysokość jest ustawiona na 100%, po transformacji nie osiągnie 100%).

Question 4

Dla mnie to działa, aby zrównoważyć różnicę między powiększeniem a przekształceniem skali, dostosuj żądane pochodzenie:

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

Question 5

Użyj scalezamiast tego! Po wielu badaniach i testach stworzyłem tę wtyczkę, aby osiągnąć to w różnych przeglądarkach:

$.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);

Uwaga:

Stworzy opakowanie z klasą scaleContainer. Dbaj o to podczas stylizacji treści.

Question 6

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

użyj tego, aby być po bezpieczniejszej stronie

Question 7

Zmieniłbym się zoomna transformwe wszystkich przypadkach, ponieważ, jak wyjaśniają inne odpowiedzi, nie są one równoważne. W moim przypadku konieczne było również zastosowanie transform-originwłasności, aby umieścić przedmioty tam, gdzie chciałem.

To działało dla mnie w Chome, Safari i Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Question 8

Nie działa jednakowo we wszystkich przeglądarkach. Poszedłem do: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage i dodałem styl dla powiększenia i -moz-transform. Uruchomiłem ten sam kod na Firefox, IE i Chrome i otrzymałem 3 różne wyniki.

<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>

Question 9

Przeklinałem to już od jakiegoś czasu. Zoom na pewno nie jest rozwiązaniami, działa w chrome, działa częściowo w IE, ale przenosi cały div html, firefox nic nie robi.

Moim rozwiązaniem, które zadziałało, było użycie zarówno skalowania, jak i tłumaczenia, a także dodanie pierwotnego wzrostu i wagi, a następnie ustawienie wysokości i wagi samego elementu div:

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

Oczywiście zmień je na własne potrzeby. Dało mi to ten sam wynik we wszystkich przeglądarkach.

Question 10

wypróbuj ten kod, aby powiększyć całą stronę w programie Firefox

-moz-transform: scale(2);

jeśli używam tego kodu, cała strona przeskalowana za pomocą przewijania y i x nie jest odpowiednio powiększona

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

**

Po prostu nie możesz powiększyć swojej strony za pomocą css w przeglądarce Firefox

**

Question 11

czy to działa poprawnie dla Ciebie? :

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

Question 12

U mnie to działa dobrze z IE10, Chrome, Firefox i Safari:

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

To powiększa całą zawartość do 50%.

Question 13

Jedyną poprawną i zgodną z W3C odpowiedzią jest: <html> obiekt i rem. transformacja nie działa poprawnie, jeśli skalujesz w dół (na przykład skala (0,5).

Posługiwać się:

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

i użyj w swoim kodzie jednostki „rem” (w tym style dla <body>) zamiast jednostek metrycznych. „%” s bez zmian. Dla każdego tła ustaw rozmiar tła. Zdefiniuj rozmiar czcionki dla treści, która jest dziedziczona przez inne elementy.

jeśli wystąpi jakikolwiek warunek, który uruchomi zoom inny niż 1.0, zmień rozmiar czcionki dla tagu (przez CSS lub JS).

na przykład:

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

To sprawia, że odpowiednik powiększenia: 0.5 bez problemów w JS z clientX i pozycjonowaniem podczas zdarzeń przeciągnij-upuść.

Nie używaj „rem” w zapytaniach o media.

Naprawdę nie potrzebujesz powiększenia, ale w niektórych przypadkach może to być szybsza metoda dla istniejących witryn.

Answer 1

82

Jak mogę powiększyć element HTML w Firefoksie i Operze?

zoomObiekt działa w IE, Google Chrome i Safari, ale to nie działa w Firefox i Opera.

Czy istnieje metoda dodania tej właściwości do przeglądarek Firefox i Opera?

css firefox cross-browser zoom opera SABU
źródło

1

Odsyłam cię do tego pytania, które dość dokładnie odpowiada na twoje.

Ben

Answer 2

1

Odsyłam cię do tego pytania, które dość dokładnie odpowiada na twoje.

Ben

Answer 3

80

Wypróbuj ten kod, to zadziała:

-moz-transform: scale(2);

Możesz się do tego odnieść .

Mubeen
źródło

2

Tak, to działa doskonale. Czy jest jakaś metoda zmiany współczynnika skalowania -moz-transformacji na procent

Jest to procent w postaci dziesiętnej. (1 = 100% 2 = 200% 0,2 = 20%) Ale uważam, że możesz również użyć notacji procentowej. w3.org/TR/css3-values/#percentages

sholsinger

46

Problem z tym polega na tym, że masz elementy o stałej pozycji. Zoom działa w inny sposób niż przekształcanie skali.

Tom Roggero

3

Poza tym ... co się dzieje, gdy ff obsługuje zoom? Czy ten podwójny zoom? To nie wygląda na rozwiązanie imo.

Cory Mawhorter

nie działa to jednak w przypadku obrazka sprite, gdzie w rzeczywistości musimy powiększyć określoną część obrazu.

colin rickels

Answer 4

2

Tak, to działa doskonale. Czy jest jakaś metoda zmiany współczynnika skalowania -moz-transformacji na procent

Answer 5

Jest to procent w postaci dziesiętnej. (1 = 100% 2 = 200% 0,2 = 20%) Ale uważam, że możesz również użyć notacji procentowej. w3.org/TR/css3-values/#percentages

sholsinger

Answer 6

46

Problem z tym polega na tym, że masz elementy o stałej pozycji. Zoom działa w inny sposób niż przekształcanie skali.

Tom Roggero

Answer 7

3

Poza tym ... co się dzieje, gdy ff obsługuje zoom? Czy ten podwójny zoom? To nie wygląda na rozwiązanie imo.

Cory Mawhorter

Answer 8

nie działa to jednak w przypadku obrazka sprite, gdzie w rzeczywistości musimy powiększyć określoną część obrazu.

colin rickels

Answer 9

Zoom i skala transformacji to nie to samo. Są stosowane w różnym czasie. Powiększenie jest stosowane przed renderowaniem, transformacja - po. Rezultatem tego jest to, że jeśli weźmiesz element div o szerokości / wysokości = 100% zagnieżdżony w innym div, ze stałym rozmiarem, jeśli zastosujesz powiększenie, wszystko w wewnętrznym powiększeniu zmniejszy się lub zwiększy, ale jeśli zastosujesz, przekształć cały wewnętrzny div zmniejszy się (nawet jeśli szerokość / wysokość jest ustawiona na 100%, po transformacji nie osiągnie 100%).

Answer 10

Dla mnie to działa, aby zrównoważyć różnicę między powiększeniem a przekształceniem skali, dostosuj żądane pochodzenie:

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

Answer 11

Użyj scalezamiast tego! Po wielu badaniach i testach stworzyłem tę wtyczkę, aby osiągnąć to w różnych przeglądarkach:

$.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);

Uwaga:

Stworzy opakowanie z klasą scaleContainer. Dbaj o to podczas stylizacji treści.

Answer 12

Możesz uczynić to jeszcze bardziej niesamowitym, obsługując szerokość obramowania skalowanego elementu ...width($(this).data('originalWidth') * x + borderWidth)

umutesen

Answer 13

5

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

użyj tego, aby być po bezpieczniejszej stronie

Divam Gupta
źródło

10

To powiększa 2x w webkicie. Pięść w zbliżeniu, druga w skali

Ales Ruzicka

Answer 14

10

To powiększa 2x w webkicie. Pięść w zbliżeniu, druga w skali

Ales Ruzicka

Answer 15

Zmieniłbym się zoomna transformwe wszystkich przypadkach, ponieważ, jak wyjaśniają inne odpowiedzi, nie są one równoważne. W moim przypadku konieczne było również zastosowanie transform-originwłasności, aby umieścić przedmioty tam, gdzie chciałem.

To działało dla mnie w Chome, Safari i Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Answer 16

Nie działa jednakowo we wszystkich przeglądarkach. Poszedłem do: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage i dodałem styl dla powiększenia i -moz-transform. Uruchomiłem ten sam kod na Firefox, IE i Chrome i otrzymałem 3 różne wyniki.

<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>

Answer 17

Przeklinałem to już od jakiegoś czasu. Zoom na pewno nie jest rozwiązaniami, działa w chrome, działa częściowo w IE, ale przenosi cały div html, firefox nic nie robi.

Moim rozwiązaniem, które zadziałało, było użycie zarówno skalowania, jak i tłumaczenia, a także dodanie pierwotnego wzrostu i wagi, a następnie ustawienie wysokości i wagi samego elementu div:

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

Oczywiście zmień je na własne potrzeby. Dało mi to ten sam wynik we wszystkich przeglądarkach.

Answer 18

To jedyna poprawna odpowiedź! Sama skala pozostawia nietknięty pierwotny rozmiar elementu.

Honza Zidek

Answer 19

wypróbuj ten kod, aby powiększyć całą stronę w programie Firefox

-moz-transform: scale(2);

jeśli używam tego kodu, cała strona przeskalowana za pomocą przewijania y i x nie jest odpowiednio powiększona

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

**

Po prostu nie możesz powiększyć swojej strony za pomocą css w przeglądarce Firefox

**

Answer 20

0

czy to działa poprawnie dla Ciebie? :

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

T.Todua
źródło

Answer 21

U mnie to działa dobrze z IE10, Chrome, Firefox i Safari:

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

To powiększa całą zawartość do 50%.

Answer 22

Jedyną poprawną i zgodną z W3C odpowiedzią jest: <html> obiekt i rem. transformacja nie działa poprawnie, jeśli skalujesz w dół (na przykład skala (0,5).

Posługiwać się:

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

i użyj w swoim kodzie jednostki „rem” (w tym style dla <body>) zamiast jednostek metrycznych. „%” s bez zmian. Dla każdego tła ustaw rozmiar tła. Zdefiniuj rozmiar czcionki dla treści, która jest dziedziczona przez inne elementy.

jeśli wystąpi jakikolwiek warunek, który uruchomi zoom inny niż 1.0, zmień rozmiar czcionki dla tagu (przez CSS lub JS).

na przykład:

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

To sprawia, że odpowiednik powiększenia: 0.5 bez problemów w JS z clientX i pozycjonowaniem podczas zdarzeń przeciągnij-upuść.

Nie używaj „rem” w zapytaniach o media.

Naprawdę nie potrzebujesz powiększenia, ale w niektórych przypadkach może to być szybsza metoda dla istniejących witryn.

Jak mogę powiększyć element HTML w Firefoksie i Operze?

Odpowiedzi: