HTML 요소 집합 크기 조정

과 비슷한 HTML 코드가 있습니다.

<div id="resizeThis"> 
<div style="background: url(...)">...text...images...</div> 
... 
</div>

div의 내용을 임의 크기로 조정하려고합니다. 예를 들어 JavaScript를 사용하여 div 너비를 얻은 다음 그에 따라 모든 요소의 크기를 조정할 수 있지만이 작업을 수행하는 가장 간단한 방법은 무엇입니까? jQuery를 사용할 수 있습니다.

$("#resizeThis > *").css('width', '64px').css('height', '64px');

하지만 #resizeThis 만 축소 시켰습니다.

배경과 텍스트 등을 어떻게 할 수 있습니까?

축소판 (보통 원래 크기의 25 %)을 생성 할 수 있도록이 작업을 수행하려고합니다.

출처

2010-01-20 Tower

브라우저를 사용하여 이미지의 크기를 조정하지 마십시오. 그것은 나쁜 그림을 만든다. 서버 측에서 축소판을 생성하십시오. (예 : imagemagick 사용) – erenon

나는 할 수 없다. 나는 클라이언트 측에서 이것을해야하고, 이미지뿐만 아니라 동적 HTML을 확장해야한다. 나는 스크린 샷을 찍고 크기를 재조정 할 것을 사용자에게 요청할 수 없다. 5 초마다. – Tower

@erenon : 최신 브라우저에서는 크기를 조정할 때 bicubic 리샘플링을 사용하는 것으로 보입니다. 그러나 서버 이미지를 축소판으로 생성하는 더 좋은 방법은 이미지로드 속도를 높이는 것입니다. 1024x768의 여러 jpeg는이 크기의 25 %보다 훨씬 느리게로드됩니다. –

완벽한 해결책을 찾았습니다!

$('#resizeThis').css('-webkit-transform', 'scale(0.5)');

를하고 제대로 그 아래에있는 모든 요소의 크기를 조정 :

난 그냥 해! :)

게코 버전이 있습니다. 이것은 내 필요에 완벽하게 어울립니다.

출처

2010-01-20 14:58:12 Tower

Firefox와 IE에서는 작동하지 않으므로 "완전한 해결책"이 아닙니다. – Zwik

인라인 요소의 폭 (예 : p 및 span)을 변경할 수 없습니다. 블록 요소의 너비 만 설정할 수 있습니다 (display : 블록). 물론 인라인 요소의 표시 속성을 변경할 수는 있지만 더 많은 문제가 발생할 수 있습니다.

텍스트 요소로 할 수있는 유일한 방법은 글꼴 크기를 변경하는 것입니다. 그러나 텍스트가 포함 된 요소에 절대 너비를 설정하는 것은 불가능합니다. 텍스트가 지나치게 흐려 지거나 스크롤 막대가 나타납니다.

출처

2010-01-20 13:42:58 kgiannakakis

이

$("#resizeThis *").css('width', '64px').css('height', '64px');

> 운영자는 즉시 아이를 선택합니다보십시오.

위의 내용은 #resizeThis의 모든 하위 항목을 선택하지만 div도 원할 것입니다. 시도 :

$("#resizeThis").find("*").andSelf().css('width', '64px').css('height', '64px');

을 또한,이 .css()에 여러 통화 대신 CSS 클래스를 사용하는 방법에 대한 생각합니다.

예.

$("#resizeThis *").find("*").andSelf().addClass("MyCssClass");

출처

2010-01-20 13:43:48

고마워, 그게 시작 됐어! 이제 텍스트를 영리한 논리로 크기를 조정해야합니다. – Tower

HTML 요소 집합 크기 조정

답변

관련 문제