브라우저크기에 따라 높이가 변하는 최신이미지 ㅠㅠ
본문
최신이미지 스킨을 받아서 적용중인데요.
가로값을 지정해야하는건데 1920픽셀로 하고 가로 스크롤이 생기지 않도록
background로 이미지를 불러왔습니다. 전부 잘 동작하는데
브라우저 가로 크기를 줄여보면 이미지가 줄어듭니다 ㅠ
원랜 이게 가로와 세로가 비율에 맞게 줄어들었는데 제가 원하는건 줄어들지 않고
그냥 가운데 기준으로 좌우가잘리는거였거든요.
몇시간을 후벼파서 드디어 가로값은 원하는대로 중앙기준으로 잘리기 시작했는데
이놈에 세로는 아무리해도 고치질 못하겠어요..
이미지 자체가 줄어드는게 아니고 이미지를 감싸고 있는 레이어가
줄어들면서 생기는 문제같은데..
도움좀 부탁드립니다.
아래 주소에 가서 확인해보시면 어떤 문제인지 바로 알수있을거에요.
http://www.healingartcenter.co.kr/index.php
이곳에서 확인가능합니다.
고수분들 도움부탁드립니다!!
참고로 저 부분에 해당하는 소스는
<div id="slides">
<?
for ($i=0; $i<count($list); $i++) {
$noimage = "$latest_skin_url/img/no-image.gif";
$list[$i][file] =get_file($bo_table, $list[$i][wr_id]);
$imagepath = $list[$i][file][0][path]."/".$list[$i][file][0][file];
?>
<?if(strlen($list[$i][wr_link1]) > 0){?><a href="<?=set_http($list[$i][wr_link1])?>"><?}?><div style="width:100%;height:100%;position:relative;z-index:1;background:url('<?=$imagepath?>') no-repeat center top;border:1px solid blue;"></div><?if(strlen($list[$i][wr_link1]) > 0){?></a><?}?>
<?}?>
<a href="#" style="position:fixed;top:300px;z-index:999;left:20px;" class="slidesjs-previous slidesjs-navigation" ><img src="<?=$latest_skin_url?>/img//btn_prev.png" alt=""></a>
<a href="#" style="position:fixed;top:300px;right:20px;z-index:999" class="slidesjs-next slidesjs-navigation" ><img src="<?=$latest_skin_url?>/img/btn_next.png" alt=""></a>
</div>
답변 4
여기에 제가 테스트로 작업 해 봤습니다. 참고 하시고용
http://designhuh.phps.kr/test.html
<div style="position:relative; width:100%; height:424px; overflow:hidden;">
<div style="width:1920px; height:424px; position:absolute; left:50%; margin-left:-960px;">
<img src="./testimage.jpg" width="1920">
</div>
</div>
감사합니다. 정말 많은 도움이 되었습니다 ^-^
이미지 크기를
max-height:auto 로 잡으신다면 브라우저 크기에 따라 조절이 가능 하십니다.
역시 안되네요. 브라우저 크기에 따라 세로크기가 달라지는것이 아닌, 424px로 언제나 고정을 시키고싶습니다.
제가 알고 있는 방법입니다.
1. 가로 100% 세로 424픽셀이고 overflow : hidden인 div하나 만드시고
2. 그 안에 롤링되는 이미지 div를 만들으세용 가운데 정렬하시고 (밑에 적어놓은거 보시면 아실듯)
이렇게 하면 세로 높이는 고정이고 가로 폭은 창이 좁아지면 좌 우가 잘려나가는 형태로 나옵니다.
제가 제대로 이해했는지 모르겠네요 ^^;;
<div style="width:100%; height:424px; overflow:hidden;">
<div style="max-width:1920px; height:424px; position:absolute; left:50%; margin-left:-960px;">
<img src="./imgae.jpg" width="1920" height="424">
</div>
</div>
실제 소스에 적용해보니 가로로만 줄어들기는 하는데 overflow:hidden이 먹질 않습니다.
가로로 1920짜리 스크롤이 생기네요 ㅠ.
혹시나 해서 위에 소스만 가져가서 따로 테스트해봤는데 마찬가지 증상입니다.
좀 이상한것은 왼쪽으로는 이미지들이 잘려나가서 안보이는데 오른쪽은 그대로 남아있습니다.
좌우에서 함께 이미지가 잘리면 스크롤이 안생길거같은데.. ㅠ
포기 직전이네요 ㅠ
