웹사이트 제작시 해상도 문제 (이게 가능한가요?)
본문
이게 가능한가요?
모니터 해상도가 서로 다른 것으로 특정 사이트를 볼때
모니터 해상도가 서로 달라도
이미지가 1024px(사이트 컨텐츠 공간) 기준으로 가운데로 오게 하려면 div 태그를 어떻게 설정해야 합니까? ^^
그림 보듯이..모니터 해상도 :1280*1024 모니터에서 보면은 그림이 가운데로 있지 않은데요
작은 해상도에서 보더라도 그림이 가운데로 있게 하고 싶어요 ^^
작은 모니터에서 보면
가운데그림만(1280px 내용이 중요하니 그 부분만) 보이고 .. (1280px밖의) 주변 그림은 잘려 보이게 하고 싶습니다.
답변 5
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
http://www.w3schools.com/cssref/pr_background-position.asp
근데 IE12 부터 지원이네요..
!-->
$(function() {
$("body").css({
"background-image":"url('island-wallpaper-1920x1080.jpg')",
"background-size":"1920px 1080px",
"background-attachment":"fixed"
});
});
http://nyaongii.dothome.co.kr/temp/wrid_108425.html
css3 속성이라서 아마 ie 하위 버전에서는 안 될 겁니다.
그래서 jquery로 하시는 걸 추천합니다.
해상도 바꿔 가면서 테스트 하시길...
!-->이미지 폭이 고정이고,
세로 높이를 안다는 가정 하에
<style>
.wrap {position:relative;min-width:1024px;height:이미지높이px;overflow:hidden}
.wrap .img {position:absolute;top:0;left:50%;margin:0 0 0 -(이미지너비/2)px}
</style>
<div class="wrap">
<div class="img">
<img src="">
</div>
</div>
입코딩이라 잘 될지 모르겠네요.
1. 해당 이미지를 감싸는 상위 요소가 창의 너비에 따라 유동적으로 너비가 변해야 합니다. 즉, 부모 요소가 너비가 고정되어 있다면 창을 줄여도 실제 너비는 고정이라 이미지의 위치도 변경되지 않는 것이죠.
유동적인 너비란 100%와 같이 퍼센테이지 너비 값을 가지게 하거나 반응형으로 제작된 각종 그리드 시스템을 이용하여 창의 너비에 맞게 변화하도록 디자인이 필요하는 것을 의미합니다.
2. 위의 조건을 만족할 경우 배경이미지로 활용하고 있다면 창의 너비가 변해도 background-position: 50% 50%로 가운데 정렬이 가능합니다.
3. 그 밖의 팁으로 CSS3의 background-size: cover 를 활용하여 비율에 맞게 늘이고 줄이고가 가능합니다.
작은 모니터에서 보면
가운데그림만(1280px 내용이 중요하니 그 부분만) 보이고 .. (1280px밖의) 주변 좌우의 그림은 잘려 보이게 하고 싶습니다.
이게 안되는 기술인가요?