이미지 크기를 브라우저 크기에 맞게 조정하는 알고리즘

Question

CSS background의 알고리즘/수학적 계산이 필요합니다. 페이지의 스타일을 쓰고 때로는 요소 배경 스타일에 배경 이미지를 사용할 때 문법은 다음과 같습니다 : background: url('img.jpg') center top;이 스타일은 브라우저 크기가 변경 될 때 자동으로 배경 이미지 크기를 변경하는 브라우저를 제공하며 또한 센터 만 볼 수 있습니다 우리 스타일의 요소의 측면. 어쩌면 배경 속성이없는 이미지 (내 경우에는 <img src="img.jpg">)가 필요합니다. 마지막 예제는 내 문제입니다. 자동으로 변경하고 CSS의 배경 속성처럼 이미지의 중앙 쪽만 표시됩니다. 그리고 자바 스크립트를 사용하여이 문제를 해결하려고 생각하고 있지만 브라우저의 알고리즘이 필요합니다.

그래서 내가 background-position:center;

에서 자바 스크립트 같은 결과를 얻는 방법을 의미하는 방법은 브라우저 크기가 이미지 크기를 조정할 수 있습니다 어떻게 이미지의 중심 측을 표시 할 수 있습니다 ... 난 당신이 내가 원하는 것을 이해 바랍니다. ..

Answer 1

this과 같은 것을 찾고 계십니까?

HTML :

full image:<br/> 
<img src="http://lorempixel.com/400/200"></img><br/> 
smaller, centered image:<br/> 
<div class="container"><img src="http://lorempixel.com/400/200"></img></div> 

CSS :

.container{ 
    width: 200px; 
    height: 150px; 
    text-align: center; 
    overflow: hidden; 
} 

.container img{ 
    position: relative; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -200px; 
} 

CSS를 많이 얻을 수 있습니다, 당신은 항상 해달라고 JS 가야합니다. 이미지를 변경하려면 margin-left/margin-top 속성을 이미지의 너비/높이의 절반으로 변경하기 만하면됩니다.