이미지 크기

이미지 크기

QA

이미지 크기

본문

이미지를 슬라이드시키고 다른 폴더 만들어 아이프레임으로 감싼 후 정상적으로 시계가 노출 되고 있습니다. 그런데 a,b,c 이미지가 화면에서 벗어 나네요.

화면 조정도 해봣는데도....ㅜㅜ

아래는 소스와 원본 이미지 입니다.

고수님들 부탁 드립니다.

참고로 height: 100%; 높이를 1080px로 수정도 해보았는데 변화 가 없네요.

 

<!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, 8000);   // 함수를 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">   
** <-위의 a,b,c 가 잘립니다.
    <iframe class="slide1" src="c:\\display\clock\hour_a.html" style="width: 100%; height: 1080px;"></iframe> **<- 이 아이프레임은 잘 나옵니다.
</div>
테스트 중
</body>
</html>

 

 

잘린 이미지

3554212097_1697580985.3232.jpg

 

 

원본 이미지

3554212097_1697581011.7875.jpg

이 질문에 댓글 쓰기 :

답변 2

이렇게 한번 변경해 보세요~

 

 

<!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;
        }
        .slide-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .slide-container img {
            position: absolute;
            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>
    <div class="slide-container">
        <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\hour_a.html" style="width: 100%; height: 100%;"></iframe>
    </div>
    <script>
        var index = 0;
        window.onload = function () {
            slideShow();
        }
        function slideShow() {
            var i;
            var x = document.getElementsByClassName("slide1");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            index++;
            if (index > x.length) {
                index = 1;
            }
            x[index - 1].style.display = "block";
            setTimeout(slideShow, 8000);
        }
    </script>
</body>
</html>

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 29
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT