마우스 오버시 각 사이트의 이미지 크기를 조정하는 방법은 무엇입니까?

Question

JavaScript 또는 CSS에 이미지 크기를 조정하여 이미지가 커지도록하는 옵션이 있습니까? 마우스 오버시 이미지의 중심이 동일하도록하려면?

Answer 1

이미지를 수평 및 수직으로 가운데에 맞출 수 있어야합니다. 이것은 display: table-cell, text-align: center 및 vertical-align: middle으로 이미지의 래퍼 div를 사용한 다음 :hover에 이미지에 몇 가지 추가 스타일을 적용하여 수행 할 수 있습니다.

는 예를 들어,이 바이올린 참조 : http://jsfiddle.net/jblasco/6qVnB/

선택적으로, 오히려 display: table-cell을 사용하는 대신 수동으로 가져가에서 이미지의 위치를 ​​변경하는 일부 마진 또는 position: relative 및 top의 조합을 알아낼 수 있습니다. 이 솔루션을 사용하여

예 : 나는 Modernizr과 함께 CSS3 transitions and transformations (see the section "2. Animating your Transforms"을 통합하는 것이 좋습니다 부드러운 효과를 http://jsfiddle.net/jblasco/fvqzR/2/

Answer 2

,이 이미지가 점진적으로 성장하고 정직 hover보다 훨씬 더 우아한 영향을 줄 수 있습니다.

Modernizr을 사용하여 내가 사용하는 CSS3 효과가 JavaScript에서 지원되거나 작성되지 않아도 사용자가 찾고있는 솔루션의 범위 내에서 적합하더라도 모든 브라우저에서 일관성을 유지할 수 있습니다.

이 정보가 도움이되기를 바랍니다.