이미지 팝업 오버레이

Question

첫째, 코드 작업 방법 :

CSS :

.popup_foreground { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    vertical-align: middle; 
    text-align: center; 
    z-index: 1; 
} 
.popup_foreground_container { 
    margin: auto; 
    padding: 24px; 
    background-color: white; 
    border: 1px solid black; 
    display: inline-block; 
    display: -moz-inline-stack; 
    max-width: 100%; 
    max-height: 100%; 
    z-index: 2; 
} 
.popup_image { 
    max-height: 100%; 
} 

자바 스크립트 :

function popupImage(img) 
{ 
    var fg = $("<div class='popup_foreground'></div>"); 
    var container = $("<div class='popup_foreground_container'></div>"); 
    var image = $("<img class='image_full popup_image' src='"+img+"' />"); 
    fg.append(container); 
    container.append(image); 

    $("body").append(fg); 

    fg.click(function(){ 
     fg.remove(); 
    }); 
} 

가 작동하는 것 같다합니다. popupImage() 함수를 호출하면 지정된 이미지가 클릭으로 끌 수있는 오버레이로 표시됩니다. 영어로보기에 고정 된 전경 요소, 미리 설정된 크기가없는 '컨테이너'(패딩 만) 및 컨테이너 내부로 들어가는 이미지가 있습니다.

내 문제는 화면의 너비 나 높이보다 큰 이미지가 비례해서 삐져 나오지 않는 것입니다. 나는 정말로 그것을 가질 수 없다. 나는 스크롤을 사용하고 싶지 않다. 브라우저 창에 맞게 이미지를 비례 적으로 배율을 적용하려면 어떻게해야합니까? 당신이에 container.append() 라인을 변경하는 경우

Answer 1

:

container.append($("<img class='image_full popup_image' src='"+img+"' width='"+ $(container).width() +"'/>")); 

이 생성 img에 컨테이너 요소의 width을 할당해야합니다. 작은 이미지의 경우 그래야 if/else 문을 사용하여 크기 조정이 필요한지 확인하는 것이 좋습니다. width 만 사용

는

는 height (뿐만 아니라width)를 설정하면 화상이 왜곡 될 가능성이있는 반면 이미지를 비례 스케일링 할 것을 의미한다.