그누보드 QA - 아이프레임에서 height

아이프레임에서 height

짱구짱구 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.10.05 11:50:26 2093 (211.♡.♡.1)

본문

아이프레임을 적용하여 슬라이드는 적용 되었는데 세로를 자동으로 화면에 맞게 하고 싶습니다.

고수님들 부탁 드립니다.

<!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>

#height #html

답변 5

웹메이킹 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-05 12:14:12 39.♡.♡.46

다음과 같은 방법으로 해 볼 수 있을것 같습니다.

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로 바꿔주시고, 필요한 경우 세로-가로 비율을 조정해줄 수 있습니다.

아이프레임으로 불러오는 a.html 의 바디 마감 </body> 바로 위에


<script>
if (typeof parent["my"] == "object") { // 만일 상위문서에 my라는 오브젝트(엘리먼트 내지는 요소)가 존재한다면
    parent["my"].style.height = "1000px"; // 그 놈의 세로사이즈를 1000px(또는 %)로 맞추어라
}
</script>

정민황 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-05 14:14:41 119.♡.♡.106

이런 방법은 어떨가요?


<?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 } ?>