반응 이미지 높이 및 너비 모두

Question

다음 링크는 너비와 관련하여 반응하지만 사용자가 모든 크기의 화면에서 이미지를 스크롤 할 필요가 없도록 높이에 반응해야합니다. 나는 최대 높이를 시도했다 : 100 %와 최대 폭 : 100 % 그러나 운 없음. 이것이 어떻게 완성 되었습니까? 감사! 당신은 IMG의 비율을 알고있는 경우

http://www.photoeye.com/gallery/nick-brandt-2013/enlargement.cfm?ip=1&i=24&id=185363&pid=Portfolio14#22

Answer 1

당신은 높이를 수정할 수 있습니다.

그럼 당신은 비율을 유지하면서 두 축에서 높이를 제한 할 수 있지 않은 viewport height length

img { 
    max-width: $imgRatio * 80vh; /* max 80 % of viewport height for img */ 
} 

브라우저를 사용할 수있다.

양방향으로 수정하려면 뷰포트 높이를 기준으로 최대 너비를 가져 오는 다른 컨테이너가 필요합니다.

주의점은 vh doesn't work in all browsers yet이며 도구 모음이 보이지 않거나 키보드가 표시되면 모바일 브라우저에서 vh가 변경됩니다.

Answer 2

높이 제한은 지속적인 문제입니다. CSS만으로는 (내 경험으로) 해결할 수 없습니다. 따라서 초상화 (비 - 풍경) 이미지는 종종 이미지 갤러리에서 문제가됩니다. 나의 접근 방식 :

.fullsize img { max-width: 200px; } 

2) 적어도 높이

@media screen and (min-height:400px) { .fullsize img { max-width: 400px; } } 
@media screen and (min-height:800px) { .fullsize img { max-width: 800px; } } 

화면에 대한 응답으로 "피해를 제한"으로

이

1) 구식 폭 전용 시작

3) 자바 스크립트 (형식 측정 후)이 적용될 두 개의 클래스를 추가로 준비하십시오.

,451,515,

.fullsize.fullwidth img { 
    width: 100%  !important; 
    height: auto  !important; 
    max-width: none !important; /* yes, back to none */ 
    max-height: none !important; 
} 

.fullsize.fullheight img { 
    width: auto  !important; 
    height: 100%  !important; 
    max-width: none !important; 
    max-height: 100% !important; 
} 
/* (!important needed for precedence over media queries) */ 

마지막으로, 자바 스크립트 :

App.adjustFullsize = function(t) { 
    t.each(function(){ 
     var p=$(this).parent('.fullsize:first'); 

     var dispW= $(window).width(), 
      dispH= $(window).height() - 126, /* fugde-factor deducts header, footers, etc. */ 
      dispRatio = (dispH>0) ? (dispW/dispH) : 1.0, 

      // no need to get real width, as long as 
      // ratio is correct $('<img/>').attr() 
      imgW = $(this).width(), 
      imgH = $(this).height(), 
      imgRatio = (imgH>0) ? (imgW/imgH) : 1.0; 


     if (imgRatio > dispRatio) // hits left-right of bbox 
      p.removeClass('fullheight').addClass('fullwidth').css('height',''); 
     else // hits top-bottom of bbox 
      p.removeClass('fullwidth').addClass('fullheight').css('height',dispH); 
    }); 
}; 

4) 당신은 넉넉한 크기 조정 이벤트가 발생한다. 기본적으로 이미지 (DOM뿐만 아니라)이로드 된 후에 해고해야하기 때문에 모든 장치가 .load() 이벤트를 안정적으로 발생시키는 것은 아닙니다.

/* depend on image load, NOT jQuery.ready(). Warning, not every device fires load() events, i.e. ipad */ 
$('.fullsize img').load(function() { 
    App.adjustFullsize($(this)); 
}); 

/* trigger again on resizes (includes tablet turnaround etc) */ 
$(this).resize(function() { 
    App.adjustFullsize($('.fullsize img')); 
}); 

$(function() { 
    App.adjustFullsize($('.fullsize img')); 
}); 

따라서 : 100ms의 지연 jQuery.delay()를 통해 다른 호를 고려한다. (모든 것이 이미 괜찮 으면 플래시/점프하지 않고 도움이 될 것입니다.)