웹사이트 제작시 해상도 문제 (이게 가능한가요?)
본문
이게 가능한가요?
모니터 해상도가 서로 다른 것으로 특정 사이트를 볼때
모니터 해상도가 서로 달라도
이미지가 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로 하시는 걸 추천합니다.
해상도 바꿔 가면서 테스트 하시길...
오 감사합니다^^ 가능하기는 하낙보네요
해보겠습니다^^ 일요일 즐거운일 많이 일어나시길 ^^
모니터 해상도가 서로 달라도
이미지가 1024px(사이트 컨텐츠 공간) 기준으로 가운데로 오게 하고싶은데요
알려주신 사이트를 보면 그게 안되어있는데요
http://nyaongii.dothome.co.kr/temp/wrid_108425.html
1. 이게 원래 불가능했던것이고 css3에 처음나온 기술인가요?
원래 기술로는 불가능한것인지요?
2. 알려주신 기술로는 안되는데요(알려주신 url 보니 안되어있네요)
어떻게 가능한 기술 없습니까?^^
http://nyaongii.dothome.co.kr/temp/wrid_108425.html
"background-position":"center"
이거 하나 추가해 주세요.
css3부터 지원되는 거라서 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밖의) 주변 좌우의 그림은 잘려 보이게 하고 싶습니다.
이게 안되는 기술인가요?
