자바 스크립트에서 화면에 이미지를 올바르게 맞 춥니 다.

Question

이 목적으로 Chrome에서 열린 이미지와 동일한 방식으로 화면의 크기에 맞게 이미지의 크기를 조정해야합니다 (rescale( 작성).

대부분 괜찮지 만 큰 가로 방향의 이미지 (폭이 넓고 높이가 모두 내 기능 http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg으로 크기가 조정 된 후 화면을 초과하는 경우) 전체 화면 이미지는 높이가 거의없고 폭이 거의없는 화면이 화면을 초과하므로 나는 거기에 더 나은 rescale 자바 스크립트 기능이 있는지 또는 여기에 어떤 chromium 소스 adepts 누가 chromiums 소스 코드에서 볼 수있는 이미지 크기 조정 기능을 얻으려면 물어 싶 었 그래서 자바 스크립트로 포트 수 있습니다? 한 이미지의 폭으로,

이

function setautow() { 
    img.style.width = 'auto'; 
    img.style.removeProperty("height"); 
    if (document.documentElement.clientHeight == 0) // Firefox again... 
    { 
     img.height = window.innerHeight; 
    } 
    else { 
     img.height = document.documentElement.clientHeight; 
    } 
} 

function setautoh() { 
    img.style.height = 'auto'; 
    img.style.removeProperty("width"); 
    if (document.documentElement.clientWidth == 0) // FF 
    { 
     img.width = window.innerWidth; 
    } 
    else { 
     img.width = document.documentElement.clientWidth; 
    } 
} 

function shrink(a) { 
    if (a) { 
     if (img.width != document.documentElement.clientWidth) { 
      setautoh(); 
     } 
    } 
    else { 
     if (img.height != document.documentElement.clientHeight) { 
      setautow(); 
     } 
    } 
} 

var rescaled = false; 

function rescale() { 
    if (rescaled) { 
     rescaled = false; 
     img.height = img.naturalHeight; 
     img.width = img.naturalWidth; 
     img.style.removeProperty("height"); 
     img.style.removeProperty("width"); 
    } 
    else { 
     rescaled = true; 
     if (img.naturalWidth > img.naturalHeight) { 
      setautoh(); 
      setTimeout(function() { 
       shrink(true); 
      }, 0); 
     } 
     else { 
      setautow(); 
      setTimeout(function() { 
       shrink(false); 
      }, 0); 
     } 
    } 
} 

Answer 1

마지막으로 편집

파이어 폭스 + 크롬 위대한 작품 내가 무엇을 찾고 있었다 만든 : 물론, 완벽한 이미지보다 더 큰 화면, 작은 이미지에서 작동 할 수 있도록 작업 할 것입니다.

function fit_to_screen() 
{ 
    img.removeAttribute("style"); 
    var winX = window.innerWidth + "px"; 
    var winY = window.innerHeight + "px"; 
    var vbar = false; 
    if (document.body.scrollHeight > document.body.clientHeight) // vertical scrollbar 
    { 
      img.style.height = winY; 
      vbar = true; 
    } 
    if (document.body.scrollWidth > document.body.clientWidth) // horizontal scrollbar 
    { 
      if (vbar) // both scrollbars 
      { 
        if ((document.body.scrollHeight - document.body.clientHeight) > (document.body.scrollWidth - document.body.clientWidth)) // let's see which one is bigger 
        { 
          img.removeAttribute("style"); 
          img.style.height = winY; 
        } 
        else 
        { 
          img.removeAttribute("style"); 
          img.style.width = winX; 
        } 
      } 
      else 
      { 
        img.removeAttribute("style"); 
        img.style.width = winX; 
      } 
    } 
} 

// bonus, switch between original size and fullscreen 
var rescaled = false; 

function rescale() 
{ 
    if (rescaled) 
    { 
      rescaled = false; 
      img.removeAttribute("style"); 
    } 
    else 
    { 
      rescaled = true; 
      fit_to_screen(); 
    } 
} 

Answer 2

다음은 멋지게 일을 할 것 같다/높이 CSS에 지정되지 않은 :

여기에 코드입니다.

#Javascript 
window.onresize = window.onload = function() 
{ 
    resize(); 
} 

function resize() 
{ 
    var img = document.getElementsByTagName('img')[0]; 
     winDim = getWinDim(); 


    img.style.height = winDim.y + "px"; 

    if (img.offsetWidth > winDim.x) 
    { 
     img.style.height = null; 
     img.style.width = winDim.x + "px"; 
    } 
} 

function getWinDim() 
{ 
    var body = document.documentElement || document.body; 

    return { 
     x: window.innerWidth || body.clientWidth, 
     y: window.innerHeight || body.clientHeight 
    } 
} 

 

#CSS 
body{ 
    margin:0; 
    padding:0; 
    text-align:center; 
    background:rgb(51, 51, 51); 
} 

 

#HTML 
<img src="http://placehold.it/4000x3000" />