애니빌드.LAB
토론방
소스관련 메인비주얼 사이즈 문의드립니다.
- s**msj
- 2016-12-14 10:00:28
- hit3934
- http://lab.anybuild.co.kr/bbs/qna/6532
반응형 홈페이지를 복사해서 제작중입니다.
메인비주얼부분 1번 빨간색 네모 부분을 width:100% height:429px 로 설정했는데 위에 캡쳐된 화면처럼 나옵니다.
( 메인비주얼 그룹코드 : {GROUP_slide} / 메인비주얼 css파 제목 : layout_pc (PC 화면, 우측 서브메뉴 색상) )
1번 빨간 네모부분에 맞게 (원래 이미지 크기대로) height:429px 로 나오고 양쪽 부분은 짤리게 하려면 어떻게 해야되나요?
그리고 2번 빨간 동그라미 부분에 여백이 2px정도 나오는데 어디서 생기는 여백인지 찾을수가 없습니다 ㅜㅜ
그 부분도 함께 확인부탁드리겠습니다. 감사합니다.
원래 디자인 시안은 아래와 같습니다.▼
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
현재 디자인한 해상도는 1920px인듯하고 스크린샷 해상도는 좀더 작은 해상도인듯 합니다.
해당 이미지의 해상도로 센터를 유지 하실려면
슬라이드를 감싸고 있는 visual에 width:1920px;position:relative;left:50%;margin-left:-960px;를 적용해주시면 됩니다.
사용하고 계신 슬라이드는 슬라이드 자체의 넓이에따라 jquery로 넓이가 자동 지정되며 이미지가 비율에 맞게 줄어드는 슬라이드입니다.
슬라이드를 감싸고 있는 visual의 넓이를 조절하면 슬라이드가 visual의 넓이를 따라갑니다.
현재 등록해주신 이미지는 2300*429입니다. 해당 이미지는 2300px이면 현재 사용되고 있는 모니터 해상도보다 큽니다. 이미지를 1920px로 조정했을 경우 높이는 358px입니다.
참고) css 소스
width:1920px;position:relative;left:50%;margin-left:-960px;
위의 소스 같은경우는 고정된 넓이에서 중앙을 유지할때 쓰는 소스입니다.
단, 무조건 센터로 지정하기때문에 테블릿화면과 모바일화면은 따로 조정을 해주셔야 합니다.
2px 여백)
현재 #header에는 height:85px이 적용되어 있지만 안에 컨테츠는 margin-top값까지 하여 89px로 출력되고 있습니다. 그러다보니 아래 컨텐츠가 더 밀려나는 현상이 나왔습니다.
해당 li의 padding값을 조정해 주시거나 높이값 height:85px을 조정하시면 해결됩니다.