jQuery의 slideUp 함수가 제대로 작동하지 않습니다.

Question

this fiddle을 살펴보세요.

내 목표는 버튼을 통해 이미지를 원격으로 밀어 올리려면 단추를 사용하는 것이지만, 대신 작아집니다.

누구나 알고 계십니까?

Answer 1

overflow: hidden으로 설정된 컨테이너 안에 이미지를 넣어야 브라우저가 이미지 크기를 조정하지 않고 가로 세로 비율의 왜곡을 일으키지 않습니다.

HTML

<div class="le_map_container"> <!-- overflow: hidden on this element --> 
    <img src="http://bethhaim.spin-demo.com/wp-content/files_flutter/1330095469Untitled-5.jpg" height="200" class="le_map"/> 
</div> 

jQuery를

$('.tour_map').click(function() {   
    $(".le_map_container").slideToggle(); 
}); 

Example fiddle

Answer 2

width이 아닌 height 만 지정 했으므로 이미지 요소가 가로 세로 비율을 유지하려고합니다.

width="200px"을 추가하면 문제가 해결됩니다. 업데이트 된 바이올린 here을 찾으실 수 있습니다.

Answer 3

slideToggle 방법은, 소자의 높이를 변화시킨다. 하지만 이미지 태그를 직접 슬라이드 태그로 지정했기 때문에 폭을 높이와 함께 변경하여 비율을 유지한다고 생각합니다.

이미지 너비에 맞게 너비를 명시 적으로 설정해보십시오.

DEMO