크기를 유지하면서 이미지에 CSS 크기 조정/확대 효과 적용

Question

CSS3 scale() 전환을 롤오버 효과에 사용하고 싶지만 롤오버 이미지 크기를 동일하게 유지하고 싶습니다. 따라서 효과는 이미지가 확대되지만 기존의 너비와 높이에 제약을받습니다.

img:hover { 
    transform:scale(1.5); 
    -ms-transform:scale(1.5); /* IE 9 */ 
    -moz-transform:scale(1.5); /* Firefox */ 
    -webkit-transform:scale(1.5); /* Safari and Chrome */ 
    -o-transform:scale(1.5); /* Opera */ 
} 

여기에 기본 fiddle로 시작합니다.

하지만 다시 이미지의 너비/높이를 유지하고 싶습니다.

저는 css3 스케일을 사용하지 않았습니다. 어쩌면 요소의 크기를 조정하는 것이 더 좋은 방법 일 수 있습니다.

Answer 1

사용자는 단순히 <div>하여 이미지를 배치하고 overflow: hidden 요소를 추가하여 그 달성 할 수 :

<div class="img-wrapper"> 
    <img src="..." /> 
</div> 

.img-wrapper { 
    display: inline-block; /* change the default display type to inline-block */ 
    overflow: hidden;  /* hide the overflow */ 
} 

WORKING DEMO한다.

---

은 또한 그것은 (다른 인라인 요소와 같은) <img> 요소가 baseline 기본적으로에 앉아 있음을 주목할 필요가있다. 그리고 there would be은 4~5px gap at the bottom of the image입니다.

수직 간격은 다음과 같이 디 센더의 예약 된 공간에 속합니다. g j p q y. 이외의 값을 사용하여 vertical-align 속성을 이미지에 추가하여 정렬 문제를 해결할 수 있습니다.

또한 사용자 환경을 개선하기 위해 transition을 이미지에 추가 할 수 있습니다.

따라서 우리는 다음과 같이 될 겁니다 :

.img-wrapper img { 
    transition: all .2s ease; 
    vertical-align: middle; 
} 

UPDATED DEMO합니다.