크기 조정 가능한 유체 이미지가 div에 싸여 있습니까?

Question

메신저 크기를 조정할 때 일부 이미지의 크기를 자동으로 조정하려고합니다.

아래 코드를 사용하여이 작업을 수행했습니다. 그러나 최소 높이, 모든 아이디어를 설정할 수있는 것과 같이 이미지를 조금 더 제어하고 싶습니까?

div에서 이미지를 래핑 할 수도 있으므로 좀 더 제어 할 수 있습니까? 임 JS 좋은에 해당하므로, 어떠한 도움이나 설명은

$(function() { 
    var $img = $(".l"); 
    var ratio; 
    var offsetX = $img.offset().left; 
    var offsetY = $img.offset().top; 

    $(window).load(function() { 
     ratio = $img.width()/$img.height(); 
     $(this).resize(); 
    }); 

    $(window).resize(function() { 
     var viewportWidth = window.innerWidth || document.documentElement.clientWidth; 
     var viewportHeight = window.innerHeight || document.documentElement.clientHeight; 
     var availWidth = viewportWidth - offsetX - 70; 
     var availHeight = viewportHeight - offsetY - 70; 

     if (availWidth/availHeight > ratio) { 
      $img.height(availHeight); 
      $img.width(availHeight * ratio); 
     } 
     else { 
      $img.width(availWidth); 
      $img.height(availWidth/ratio); 
     } 
    }); 
}); 

Answer 1

그냥 CSS를 사용하여 도움이 될 수 없습니다 : 당신이 필요로

img { width: 100%; } 

그런 다음 height 또는 min-height을 적용 할 수 있습니다.

이 바이올린의 창 크기를 조정, 그것은 작업을 참조하십시오 :

Example fiddle