슬라이드이미지 해상도에 맞게 맞추기
본문
안녕하세요!
질문드립니다!
메인에 이미지 슬라이드를 설치했습니다.
그런데 문제가 생겨서요!
바로 사이즈때문에 가로 스크롤이 생긴다는점!
이미지 확인하시면 알수 있으실겁니다!
테이블도 100%, 이미지사이즈도 100%!
이렇게 했는데...
가로 스크롤이 계속 생겨나네요!ㅠㅠ
사이즈 원본은 2000px입니다!
사이즈는 2000PX맞게 나오는거 같은데...
제가 원하는거는 사람들마다 이용하는 해상도가 다르자나요!
비록 사진원본은 2000px이지만...
모니터 해상도에 맞게 가롤 스크롤 없이 딱 맞게 설정하는 방법이 없을까요~?
이거때문에 죽겠네요!
그냥 보기 편하게 전체 테이블 사이즈 크기로 하면 좋겠지만...
모니터에 따라 100% 보여지게 하고 싶어서요!ㅠㅠ
답변 바랍니다! 아래 소스 첨부할께요/!
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script>
$(function(){
$('#carousel').infiniteCarousel({
imagePath: '../images/'
});
});
</script>
<style>
html, body {
width:100%
height: 100%;
padding: 0px;
margin: 0px;
position:relative;
}
div.infiniteCarousel {
margin: auto 0 auto;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
clear:right;
}
div p {
color: #333333;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 18px;
text-shadow: 0 1px 1px #C9C9C9;
position:relative;
}
</style>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><ul id="carousel">
<li><img width="100%" alt="" src="../image/main_01.jpg" /></li>
<li><img width="100%" alt="" src="../image/main_02.jpg" /></li>
<li><img width="100%" alt="" src="../image/main_03.jpg" /></li>
<li><img width="100%" alt="" src="../image/main_04.jpg" /></li>
</ul></td>
</tr>
</table>