문제가 구현하는 데이 같은 사진 갤러리에 대한 개념 질문이

Question

사진 갤러리에서 이미지를 확장 할 -webkit을-변환 예를 들어 Chrome)을 사용하면 축소 된 이미지가 고품질로 유지되는 동안 원활하게 이미지를 확대/축소 할 수 있습니다.

확대/축소되지 않은 이미지를 실제로보다 약간 작은 버전으로 표시하여줌으로써 실제 크기로 표시합니다.

-webkit-transform:scale(0.8); 

을 그리고 호버에 스케일 업 :

그래서, 보통 이미지가 먼저 축소된다

-webkit-transform:scale(1.2); 

내 질문 : 아래의 초기 크기 조정이 예상되는 어떻게 브라우저에서 작동 이 축소 방법을 지원하지 않습니까? 그 갤러리를 IE에서 열어 보면 무슨 뜻인지 알 수 있습니다. 축소되지 않은 이미지가 표시되어 크기가 너무 커지면 레이아웃이 깨집니다.

내가 원하는 것은 :

• 를 지원하는 브라우저의 전체 효과를. 중요한 것은 확대 된 버전이 품질을 유지한다는 것입니다.
• 를 지원하지 않는 브라우저에 대한 전혀 효과 없음, 아직 레이아웃이
• 그것은 모두 이미지 방향을 위해 일해야하며, 너무 이미지의 폭과 높이

의 다양한있을 수 있습니다 파손되지 않도록 견고한 원래 치수

누구? 브라우저 스니핑이나 자바 스크립트가 필요없는 우아한 솔루션이 바람직하지만 모든 대답을 환영합니다.

Answer 1

자바 스크립트를 사용하지 않고 작업하고 싶다면 CSS를 사용하여 초기 스케일을 버리는 것이 유일한 방법 인 것 같습니다. 마크 업에서 이미지의 너비와 높이를 조정하는 "구식"방식으로이 작업을 수행하려고합니다.

<img src="yourImageSrc" width="80%" height="80%"> 

사용자 에이전트가 최신이 아닌 경우 레이아웃을 그대로 유지할 수 있습니다.

** 퍼센트가 리터럴 높이/너비 정의에서 작동하는지 모르겠습니다. 그러나 당신은 항상 당신이 원하는 비율을 알아 내고 그것을 꽂을 수 있습니다.