이전 목록 다음
채택완료

이미지 게시판 원본 팝업시 크기 조절 문제입니다.

Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 19:43:51 368
안녕하세요. 검색을 많이 해봤습니다만, 제가 잘 못찾는건지 모르겠습니다.

다른 질문글 검색을 통해서, 가로길이를 100%로 돌려서 조절 하는 방법까진 봤습니다.

그런데, 그렇게 하면 세로길이는 어차피 길어서 스크롤로 내려야 하는 번거로움이 있습니다.

이것을 50%로 줄이면 화면에 꽉찬 새창이 뜨면서, 이미지는 50%만 채워서 뜹니다. 

원하는건 새창 자체가 가로길이 100%로 뜨는게 아니라 50%든 60%든 줄이면

팝업창 자체가 조정한 사이즈로 나오는 방법이 있을까 궁금해서 여쭤봅니다. 

아니면, 원본 이미지를 다 사이즈를 줄여서 올려야 하니깐, 조금 귀찮아서요 ㅠ ㅋㅋ
이미지 팝업 사이즈
|

답변 2개 / 댓글 11개

채택된 답변
+20 포인트
Poter
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 22:24:49
view.skin.php ......
기존것에 덮어야 합니다. 참고삼아 보세요.

$(function() {
    $("a.view_image").click(function() {
        // 절대 고정 창 
        var win_w = 800; 
        var win_h = 600;
        
        // 중앙 좌표 계산
        var win_l = (window.screen.availWidth - win_w) / 2;
        var win_t = (window.screen.availHeight - win_h) / 2;

        // 팝업 옵션 (location, status 등을 꺼야 창 크기가 정확해집니다)
        var settings = "width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no";
        
        var win = window.open(this.href, "large_image", settings);

        if (win) {
            win.onload = function() {
                // 강제 방어 브라우저가 창을 키우지 못하게 다시 한번 800x600으로 리사이즈
                win.resizeTo(win_w, win_h);
                
                var doc = win.document;
                var style = doc.createElement('style');
                style.innerHTML = `
                    html, body { 
                        margin: 0 !important; 
                        padding: 0 !important; 
                        width: 100% !important;
                        height: 100% !important;
                        display: flex !important;
                        justify-content: center !important;
                        align-items: center !important;
                        background: #000 !important; 
                        overflow: hidden !important; 
                    }
                    img { 
                        max-width: 100% !important; 
                        max-height: 100% !important; 
                        object-fit: contain !important; /* 비율 유지하며 창 안에 가두기 */
                    }
                `;
                doc.head.appendChild(style);
            };
        }
        return false;
    });
});

적용 게시판 .... https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt
 

답변에 대한 댓글 11개

Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 22:29:57
우선 답변 감사드립니다. 이 설정으로 변경시, 사진의 비율이 틀려지면 사진이 잘려서 보이는거죠?
절대치를 입력하는것보다 %로 설정하는 방법을 조금 더 찾아보고 싶습니다.
답변에 감사드리고, 예시 게시판에 이미지로는 내용물이 없이 백그라운드만 보여서
제가 생각하는 것처럼 비율이 맞지 않으면 잘려서 보이는거 같은데 맞죠?
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 22:57:52
object-fit: contain !important; /* 비율 유지하며 창 안에 가두기 */
Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 23:13:55
감사합니다 일단 적용해보도록 하겠습니다 ^^
Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 13:36:02
이미지가 작게 출력이 되긴 합니다만,
팝업이 아니라 새탭으로 진행이 되는데... 팝업으로는 띄울수 있을까요 ;;ㅁ;;?

$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});

기존 뷰스킨 이부분에 덮어씌우는게 맞는거 같긴한데...
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 13:40:14
위에것도 이것도 둘다 팝업 입니다.

$(function() {
$("a.view_image").click(function() {
// 1. 창 크기 설정 (화면의 60% 비율)
var ratio = 0.6;
var win_w = screen.availWidth * ratio;
var win_h = screen.availHeight * ratio;

var win_l = (screen.availWidth - win_w) / 2;
var win_t = (screen.availHeight - win_h) / 2;

// 2. 팝업 옵션 (스크롤바와 리사이즈를 꺼서 깔끔하게 고정)
var settings = "width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no";

var win = window.open(this.href, "large_image", settings);

if (win) {
win.onload = function() {
var doc = win.document;
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 13:40:22
width: 100% !important;
height: 100% !important;
background: #000 !important;
overflow: hidden !important; /* 스크롤바 제거 */
display: block !important;
}
img {
width: 100% !important;
height: 100% !important;
/* 비율 유지하며 창을 꽉 채움 (넘치는 부분은 잘림) */
object-fit: cover !important;
cursor: pointer;
}
`;
doc.head.appendChild(style);

// 클릭하면 창 닫기 기능 추가 (옵션)
doc.getElementsByTagName('img')[0].onclick = function() {
win.close();
};
};
}
return false;
});
});
Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 14:10:21
https://nekena.cafe24.com/bbs/board.php?bo_table=D7000&wr_id=49

크롬이랑 브레이브, 엣지 브라우저 둘 다 새탭에서 적용이 되는데 왜 그럴까요.

답변 너무너무 감사드립니다. ㅠㅠ

뷰스킨 경로가 해당 스킨파일안에 있는거 맞지요?
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 14:20:47
크롬 ... 팝업 뜹니다. view.skin.php 맞습니다.

$(function() {
$("a.view_image").click(function(e) {
// 기본 동작 차단 (표준 방식)
e.preventDefault();

// 1. 창 크기 및 위치 설정 (화면의 60% 비율)
var ratio = 0.6;
var win_w = screen.availWidth * ratio;
var win_h = screen.availHeight * ratio;

var win_l = (screen.availWidth - win_w) / 2;
var win_t = (screen.availHeight - win_h) / 2;

// 2. 팝업 옵션 보강
// 'popup' 속성은 최신 브라우저에서 새 탭으로 가는 것을 막는 가장 강력한 옵션입니다.
// 보안상 scrollbars는 yes로 두는 것이 팝업 차단을 피하기에 더 유리합니다.
var settings = "popup,width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=yes,scrollbars=yes";

// 3. 팝업 창 열기
var win = window.open(this.href, "large_image", settings);

if (win) {
// 창이 열렸다면 포커스를 줍니다.
win.focus();

win.onload = function() {
var doc = win.document;
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 14:21:35
// 팝업 내부 이미지가 있는지 확인 후 스타일 적용
var targetImg = doc.getElementsByTagName('img')[0];
if (targetImg) {
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
background: #000 !important;
overflow: hidden !important;
display: flex !important;
align-items: center;
justify-content: center;
}
img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
andor
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 14:21:41
height: auto !important;
object-fit: contain !important; /* 이미지 비율 유지하며 꽉 채움 */
cursor: pointer;
}
`;
doc.head.appendChild(style);

// 이미지 클릭 시 창 닫기
targetImg.onclick = function() {
win.close();
};
}
};
} else {
// 팝업이 차단된 경우 안내 (안 보일 수 있음)
alert("팝업 차단 설정을 확인해 주세요.");
}

return false;
});
});
Nekena
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-22 (수) 15:47:23
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});

기본 설정시 팝업으로 뜨는데,

마지막에 팝업강조부분으로 설정해 봤는데도 여전히 새 탭으로 뜨네요..

브라우저 문제인지 조금더 연구해보겠습니다. 감사합니다 ^^

보여주신 예시사이트의 팝업은 또 정상적으로 잘 보이네요.. ㅠ

뭐가 문제지.. ㅠ
스스팸마요
프로필 보기이 회원 글보기이 회원의 댓글보기
 2026-04-18 (토) 23:34:41
이미지가 50% 만 채워서 화면에 보이는건,
이미지에 설정된 가로 크기가, 사용하시는 기기의 절반으로 설정 되어서 그렇게
보이는 거에요.

팝업 가로가 100%면, 이미지의 가로도 100% 로 설정되야만 하고,
일반적으로 모바일 설정에서는 이미지의 세로 크기는 설정하지 않습니다.

답변을 작성하려면 로그인이 필요합니다.