크기 조정시 사진 확대

사진을 표시해야하는 웹 사이트 (문제는 아님)를 개발 중입니다. 하지만이 링크로 표시해야합니다. http://buildinternet.com/project/supersized/slideshow/3.2/demo.html 크기 조정시 사진 확대

그래서 크기를 조정할 때 크기를 조정하지 않기 위해 그림을 확대해야합니다. 일부 방법을 알고 있습니까? 여기

내가 무엇을 가지고 :

HTML :

<div id="container_images"> 
    <ul> 
     <li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li> 
    </ul> 
</div>

CSS :

#container_images{ 
    display: block; 
    position: fixed; 
    left: 0; 
    top: 0; 
    overflow: hidden; 
    z-index: -999; 
    height: 100%; 
    width: 100%; 
} 

#container_images li{ 
    display: block; 
    list-style: none; 
    z-index: -30; 
    position: fixed; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity:1; 
} 

#container_images li img{ 
    width: 100%; 
    height: 100%; 
    display: block; 
}

출처

2013-02-26 Romain

사용자가 외부 사이트를 리버스 엔지니어링하지 않을 것을 기대하십시오. 질문의 일부로 실제 사례를 포함 시키십시오. –

내 게시물 편집, 죄송합니다 – Romain

Ctrl +/-로 크기를 조정 하시겠습니까? –

내가 제대로 브라우저의 붙박이 줌 (Ctrl 키 +)를 필요로하지 않는 이해하는 경우 창 크기를 조정할 때 브라우저의 전체 창에 그림을 채우고 싶을뿐입니다.

두 가지가 필요합니다.

먼저 창 크기 조정 이벤트를 실행하려면 몇 가지 자바 스크립트가 필요합니다. 그런 다음 새 창 크기를 고려하여 그림의 중심을 계산하고 그림의 왼쪽/위쪽 여백을 새로운 값으로 설정하는 간단한 수학이 필요합니다. .

쉽게 수행 할 수 jQuery과 : 기억

$(window).resize(function() { 
    var h = $(window).height(); 
    var w = $(window).width(); 
    var pic = $('#container_images img'); 
    var pic_width = pic.width(), pic_height = pic.height(); 

    $(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2); 
});

한 가지는 사진의 너비/높이가 이미 원래 크기로 변경하는 경우, 당신은 폭에서 그 새 크기를 얻을 것입니다()와 height() 함수.

원본을 터치하지 않았는지 확인하거나 원본 이미지 크기 (예 : How do I get actual image width and height using jQuery?)를 잡기위한 해결 방법 중 하나를 사용해야합니다.

위의 스 니펫은 시작에 불과하므로 일부 init 함수에서 그림과 해당 매개 변수를 가져 와서 크기 조정 이벤트에서 CSS를 다시 계산하거나 수정해야합니다.

출처

2013-02-26 17:36:13

크기 조정시 사진 확대

답변

관련 문제