테두리를 자르지 않고 이미지를 확대 및 가운데에 맞 춥니 다.

많은 것들을 시도했지만 아무 것도 작동하지 않았습니다.테두리를 자르지 않고 이미지를 확대 및 가운데에 맞 춥니 다.

나는 그림을 가지고있다. (알 수없는 높이와 너비라고한다.) 나는 그것을 (수직과 수평으로) 가운데에 놓기를 원한다. 높이와 너비는 창 크기에 따라 결정되지만 원래 높이 및 너비보다 커야합니다.

예를 들어 그림을 두 번 클릭하면 Windows Live Photo Gallery을 볼 수 있습니다. 이것은 내가 css/jquery에서 정확히 필요한 것입니다. 페이지에서 원하는대로 이미지를 조정하는 방법을 모르겠습니다.

도움 주셔서 감사합니다.

영어가 모국어가 아니기 때문에 특정 용어를 모르겠습니다.

출처

2011-10-11 Jeremy Dicaire

손으로 이미지 크기를 알고 있다면 (서버 측에서) 가장 쉬운 방법은 HTML을 렌더링 할 때 수행하는 것입니다. <img> 태그의 width 및 height 속성을 사용하여 크기를 설정하고 margin-left 및 margin-top을 컨테이너에 맞 춥니 다. 이렇게하면 최종 사용자가 이미지를로드 한 후 자바 스크립트 측의 크기를 재조정 할 때 화면 깜박임이 표시되지 않으므로 훨씬 더 좋습니다. 이렇게하는 것이 훨씬 좋은 방법입니다.

: 의견에 명시된 바와 같이 서버 측 솔루션을 사용하는 경우 $ (window) .resize()에서 여전히 자바 스크립트 솔루션을 사용하여 이미지가 가운데 맞춤 크기 사용자가 창 크기를 변경합니다.

- 귀하의 질문에 자바 스크립트이기 때문에

그러나, 당신은 두 단계로 작동합니다; 비율을 유지하면서 창보다 크지 않도록 먼저 이미지 높이와 너비를 줄인 다음 두 번째 시간에 가로 및 세로 가운데에 약간의 여백을 적용하십시오. 여기

당신은 당신이 원하는 것을 얻을 수있는 방법의 예입니다,이 코드가 명확 아마 최적화되지 않는다는 것을 참고 그대로, 내가 그것을 유지하기 위해 자사의 "상세"방법으로 그것을두고 사용할 수 없습니다 이해하기 쉽다.

html로 :

<body> 
    <div id="main" style="margin: 0; padding: 0"> 
    <img id="yourpic" src="http://domain.com/image.png" /> 
    </div> 
</body>

JS : 그래서 당신은 당신이 힘이 브라우저를 사용하는 경우 이벤트가 quite buggy입니다 http://jsfiddle.net/RPCjE/2/ (쵸메 img.onload :

// we use the onLoad event so that your browser know the image dimension 
$('#yourpic').load(function() { 
    // cache your objects 
    var $window = $(window); 
    var $this = $(this); 

    var tmp; 

    // if the image has too much width reduce it, keeping its ratio 
    if ($window.width() < this.width) { 
     tmp = [this.width, this.height]; 
     $this.width($window.width()); 
     $this.height(tmp[1]/(tmp[0]/this.width)); 
    } 

    // same for its height 
    if ($window.height() < this.height) { 
     tmp = [this.height, this.width]; 
     $this.height($window.height()); 
     $this.width(tmp[1]/(tmp[0]/this.height)); 
    } 

    // now center it horizontally 
    if ($window.width() > this.width) { 
     $this.css('margin-left', ($window.width() - this.width)/2); 
    } 

    // and vertically 
    if ($window.height() > this.height) { 
     $this.css('margin-top', ($window.height() - this.height)/2); 
    } 
});

당신이있어 예에서 볼 수 있습니다 캐시없이 새로 고침해야 함).

출처

2011-10-11 18:12:13 Lepidosteus

좋은 그림, 그게 어디 있니? – magritte

모르겠다. imgur의 홈페이지에서 첫 번째 큰 이미지를 가져왔다. http://imgur.com/gallery/fWoCV – Lepidosteus

하지만 웹 브라우저로 보내기 전에 PHP를 사용하여 이미지를 렌더링하면 창이 크기가 조정되면 PHP가 필요하다. 다시 그림을 렌더링하고 사용자 환경을 느리게 할 수 있습니다. 어떻게 생각하십니까? 멋진 그림;) ... 그리고 코드에 대한 감사, 나는 그 주위에 놀거야. –

테두리를 자르지 않고 이미지를 확대 및 가운데에 맞 춥니 다.

답변

관련 문제