모바일배너 이미지 사이즈 조정
본문
<!-- 모바일배너 -->
<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 가 들어가는건 빼는게 좋을것 같습니다,
현재 실행이 잘 되더라도 언제 어떻게 무제 생길지 모릅니다.
깔끔하게 해결되었습니다. 감사합니다. 즐거운 주말 보내세요~
답변을 작성하시기 전에 로그인 해주세요.