모바일배너 이미지 사이즈 조정 채택완료
Copy
#a, #b
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 = '';
}
} 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);
안녕하세요
검색으로 알게된 소스를 가져다가 모바일 페이지에 배너를 넣는 연습을 해보고있는 초보입니다
가로세로 이미지를 픽셀단위의 숫자만 넣었을때는 잘 보이는데,
값을 가로 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개
채택된 답변
+20 포인트
myzone3년 전
<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 가 들어가는건 빼는게 좋을것 같습니다,
현재 실행이 잘 되더라도 언제 어떻게 무제 생길지 모릅니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인