javascript 이미지 크기를 조정하고 div를 채우기 위해 자르기

-1

검색 시간이 지나면 여기에서 JavaScript를 약간 발견하고 조정했습니다. http://generationsinc.co.uk/test/java.html 정확하게 이미지를 조작하고 있습니다. 정확하게 창 크기를 조정하고 싶습니다.javascript 이미지 크기를 조정하고 div를 채우기 위해 자르기

<html> 
<head> 
<title>test</title> 

<script type="text/javascript"> 

function resizeImage() 
{ 
    var window_height = document.body.clientHeight 
    var window_width = document.body.clientWidth 
    var image_width = document.images[0].width 
    var image_height = document.images[0].height 
    var height_ratio = image_height/window_height 
    var width_ratio = image_width/window_width 
    if (height_ratio > width_ratio) 
    { 
     document.images[0].style.width = "100%" 
     document.images[0].style.height = "auto" 
    } 
    else 
    { 
     document.images[0].style.width = "auto" 
     document.images[0].style.height = "100%" 
    } 
} 
</script> 

</head> 

<body onresize="resizeImage()"> 

<img onload="resizeImage()" src="f/a.jpg"> 

</body> 
</html>

div에서 동일한 방식으로 작동하도록 할 수 있습니까? 즉, div를 완전히 채우고 이미지의 종횡비를 유지하면서 가능한 한 이미지를 작게 유지 하시겠습니까? (div 자체는 창 크기의 백분율로 높이와 너비가 조정됩니다.)

출처

2012-03-19 Wellie

이렇게하려면 JavaScript가 필요하지 않습니다. 순수한 CSS를 사용할 수 있습니다. 너비 백분율로 div 요소를 만듭니다. 그런 다음 CSS를 100 %로 설정 한 너비의 이미지를 내부에 놓습니다.

Example in this jsFiddle

출처

2012-03-19 23:41:39 aurbano

덕분에 (자바 스크립트/결과 경계의 가장자리를 드래그 해보십시오) -의 차이는 하단에 공백 apperars 당신이 위의 동일한에서 ... 시도 측면을 드래그이다 이미지의 크기가 계속 변경되어 채우기에 충분한 공간이 채워집니다. – Wellie

죄송합니다 - 설명하기가 너무 쉽지 않습니다. 시도해 보시고 내가 뭘 좋아하는지 알게 될 것입니다. – Wellie

글쎄, 당신은 이미지의 가로 세로 비를 유지하고 싶다고했다. 이 솔루션은 화면 비율을 유지하면서 이미지가 가능한 가장 큰 영역을 채 웁니다. – aurbano

javascript 이미지 크기를 조정하고 div를 채우기 위해 자르기

답변

관련 문제