Firefox 및 Opera에서 HTML 요소를 확대하려면 어떻게해야합니까?
Firefox 및 Opera에서 HTML 요소를 확대하려면 어떻게해야합니까?
이 zoom속성은 IE, Google Chrome 및 Safari에서 작동하지만 Firefox 및 Opera에서는 작동하지 않습니다.
이 속성을 Firefox 및 Opera에 추가하는 방법이 있습니까?
이 코드를 시도하면 작동합니다.
-moz-transform: scale(2);
이것을 참조 할 수 있습니다 .
확대 / 축소 및 변환 배율은 동일하지 않습니다. 그들은 다른 시간에 적용됩니다. 렌더링이 발생하기 전에 확대 / 축소가 적용됩니다. 그 결과 너비 / 높이 = 100 %가 고정 된 크기로 다른 div 내부에 중첩 된 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에 가서 zoom 및 -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>
이 코드를 사용하여 fireFox에서 전체 페이지를 확대하십시오.
-moz-transform: scale(2);
이 코드를 사용하면 y 및 x 스크롤로 전체 페이지가 제대로 확대되지 않습니다.
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
fireFox에서 CSS를 사용하여 페이지를 확대 할 수 없습니다.
**
이것이 당신을 위해 올바르게 작동합니까? :
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은 확실히 해결책이 아니며 크롬에서 작동하고 부분적으로 IE에서 작동하지만 전체 html div를 이동하고 firefox는 아무런 작업을 수행하지 않습니다.
My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
Use:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
for example:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
Don't use "rem" in media queries.
You really doesn't need zoom, but in some cases it can faster method for existing sites.
참고URL : https://stackoverflow.com/questions/4049342/how-can-i-zoom-an-html-element-in-firefox-and-opera
'IT TIP' 카테고리의 다른 글
| Sublime Text 구성 및 설치된 패키지 내보내기 (0) | 2020.10.14 |
|---|---|
| Google App Engine에서 파일 업로드 (0) | 2020.10.14 |
| Pandas의 다른 값을 기반으로 한 값 변경 (0) | 2020.10.13 |
| AppCompat v21을 사용하여 Android에서 FAB (플로팅 작업 버튼)를 만드는 방법은 무엇입니까? (0) | 2020.10.13 |
| 공식 PostgreSQL Docker 이미지의 구성 파일을 사용자 지정하는 방법은 무엇입니까? (0) | 2020.10.13 |