모바일배너 이미지 사이즈 조정

모바일배너 이미지 사이즈 조정

QA

모바일배너 이미지 사이즈 조정

본문


<!-- 모바일배너 -->
<td>
<div>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css","border: 1px solid gold;border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;">
         #a, #b
        </style>
        <script type="text/javascript">
        function random_images(args) {
            if (args.node.length == args.imgs.length) {
                args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
                args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
                for (var i = 0, i_len = args.node.length; i < i_len; i++) {
                    args.node[i].innerHTML = '<a href="'+args.imgs[i].href+'" target="_blank"><img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />';
                }
            } else {
                alert("length is not equal");
            }
        }
        
        document.addEventListener("DOMContentLoaded", function () {
            var params = {
                node: [
                    document.getElementById("a"),
                    document.getElementById("b")
                ],
                imgs: [
                    {src: "https://i.imgur.com/EFfabVg.jpg", width='100%', height='auto', href:"http://naver.com/"},
                    {src: "https://i.imgur.com/a3fVD1k.jpg", width='100%', height='auto', href:"http://naver.com/"},
                    //{src: "http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg", width='100%', height='auto'},
                
                ]
            };
            random_images(params);
        }, false);
        </script>
    </head>
    <body>
        <div id="a"></div>
        <div id="b"></div>
    </body>
</div>
</td>
<!-- 배너 끝 -->

 

안녕하세요 

검색으로 알게된 소스를 가져다가 모바일 페이지에 배너를 넣는 연습을 해보고있는 초보입니다

 

가로세로 이미지를 픽셀단위의 숫자만 넣었을때는 잘 보이는데,

값을 가로 100%  세로 auto로 바꾸니까 소스가 깨져서인지 이미지가 통채로 안보여져버리네요

 

어떻게 바꾸면 화면사이즈에 맞게 변경이 될 수 있을지 알려주시면 감사하겠습니다

 

 

한가지 더 질문드리자면

img style을

border: 1px solid gold;border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;

이런값을 넣어 테두리를 둥글게 하고 싶은데

 

단일 이미지에는 img style = border ㅇㅇㅇㅇㅇㅇ ; src=""  하니까 적용이 되던데 

여기서는 어디에다가 넣어야 작동이 될까요?

이 질문에 댓글 쓰기 :

답변 1

<style type="text/css">

#a img,
#b img {width:100%; height:auto; border: 1px solid gold;border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px; }
</style>

이렇게 하시고 자바스크립트에 있는 width 하고 height 다 빼보세요,, 

 

추가로 div 안에 head, body 가 들어가는건 빼는게 좋을것 같습니다, 

현재 실행이 잘 되더라도 언제 어떻게 무제 생길지 모릅니다.

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

회원로그인

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