33 lines
1.2 KiB
JavaScript
33 lines
1.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
const resizableDivs = document.querySelectorAll("div.resizable");
|
|
|
|
// 각 요소의 원래 비율을 data 속성에서 계산합니다.
|
|
resizableDivs.forEach(div => {
|
|
const originalWidth = div.getAttribute('data-original-width');
|
|
const originalHeight = div.getAttribute('data-original-height');
|
|
if (originalWidth && originalHeight) {
|
|
div.dataset.ratio = originalHeight / originalWidth;
|
|
} else {
|
|
// 만약 data 속성이 없다면 현재 크기로 비율 계산 (이 경우는 새로고침 시 문제가 발생할 수 있음)
|
|
const currentWidth = div.offsetWidth;
|
|
const currentHeight = div.offsetHeight;
|
|
if (currentWidth) {
|
|
div.dataset.ratio = currentHeight / currentWidth;
|
|
}
|
|
}
|
|
});
|
|
|
|
function updateHeights() {
|
|
resizableDivs.forEach(div => {
|
|
const ratio = parseFloat(div.dataset.ratio);
|
|
if (!isNaN(ratio)) {
|
|
div.style.height = (div.offsetWidth * ratio) + "px";
|
|
}
|
|
});
|
|
}
|
|
|
|
// 페이지 로드 시와 창 크기 변경 시에 높이 업데이트
|
|
updateHeights();
|
|
window.addEventListener("resize", updateHeights);
|
|
});
|