아이프레임에서 height
본문
아이프레임을 적용하여 슬라이드는 적용 되었는데 세로를 자동으로 화면에 맞게 하고 싶습니다.
고수님들 부탁 드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Room</title>
<style>
body {
margin: 0;
overflow: hidden;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}
@keyframes fade {
0% {
opacity: 50;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
var index = 0; // 이미지에 접근하는 인덱스
window.onload = function () {
slideShow();
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); // slide1에 대한 DOM 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; // 처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; // 인덱스가 초과되면 1로 변경
}
x[index - 1].style.display = "block"; // 해당 인덱스는 block으로
setTimeout(slideShow, 2000); // 함수를 4초마다 호출
}
</script>
<div>
<img class="slide1" src="c:\\display\a.jpg">
<img class="slide1" src="c:\\display\b.jpg">
<img class="slide1" src="c:\\display\c.jpg">
<iframe class="slide1" src="c:\\display\clock_a.html" style="width: 100%; height: 1200px;"></iframe>
</div>
테스트 중
</body>
</html>
답변 5
다음과 같은 방법으로 해 볼 수 있을것 같습니다.
CSS를 사용한 비율조정 : 아이프레임의 높이를 화면 높이에 비례하도록 CSS를 사용하여 조정할 수 있습니다. 아이프레임이 화면의 높이에 따라 조정될 것입니다.
iframe {
width: 100%; /* 아이프레임의 너비를 100%로 설정하여 가로를 화면에 맞게 만듭니다. */
aspect-ratio: 16/9; /* 세로-가로 비율을 조절합니다. 예를 들어, 16:9 비율로 조정하는 경우입니다. */
}
JavaScript를 사용한 자동 조정 : JavaScript를 사용하여 아이프레임의 높이를 동적으로 조정할 수도 있습니다.
// 아이프레임 요소를 가져옵니다.
var iframe = document.getElementById('your-iframe-id'); // 'your-iframe-id'를 실제 아이프레임의 ID로 바꿉니다.
// 아이프레임의 내용이 로드될 때마다 높이를 조정합니다.
iframe.onload = function() {
// 아이프레임의 내용 높이를 가져와서 아이프레임의 높이로 설정합니다.
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
'your-iframe-id' 부분을 실제 아이프레임의 ID로 바꿔주시고, 필요한 경우 세로-가로 비율을 조정해줄 수 있습니다.
aspect-ratio 이 css 가 유용하네요.
저도 하나 익힙니다.
@비타주리 안녕하세요~ 칭찬 감사드립니다. ㅎㅎ
유튜브 반응형 코드를 싹 고쳐야겠네요.
onresize 이벤트로 모바일 가로 세로 변경 감지 코드도 필요없을 듯 합니다.ㅋ
비타주리님의 유튜브스킨 잘 사용하고 있습니다..
아이프레임에 아이디를 하나 주고
<iframe id="my" class="slide1" src="a.html" style="width:100%"></iframe>
아이프레임으로 불러오는 a.html 의 바디 마감 </body> 바로 위에
<script>
if (typeof parent["my"] == "object") { // 만일 상위문서에 my라는 오브젝트(엘리먼트 내지는 요소)가 존재한다면
parent["my"].style.height = "1000px"; // 그 놈의 세로사이즈를 1000px(또는 %)로 맞추어라
}
</script>
이런 방법은 어떨가요?
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<style>
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
width:100%;
height:70%;order:none;
}
</style>
<div class="container-fluid">
<?php echo na_widget('rand-content', 'synologynas-gallery-01'); ?>
</div>
<?php if($member[mb_level] < 1) alert('갤러리(Photos)는 정회원만 이용가능 합니다.', G5_URL); { ?> // 갤러리 이용가능한 레벨 선택
<div class="container">
<iframe class="responsive-iframe" src="불러올 주소"></iframe>
</div>
<?php } ?>
iframe 영역밖에 div로 100% 높이 영역을 잡으시고 iframe도 100%로 하시면 될꺼같네요
고수님들 모두모두 감사드립니다.