이미지 미디어 쿼리와 자간에 대해 문의드립니다.

0 투표
526 조회

반응형에 대한 몇가지 질문입니다. 

 

1. mustoryart.com 의 sub 메뉴의 body-header 부분에 들어가는 이미지의 사이즈 

 :  백그라운드 이미지로 넣어 사이즈별로 조절하고자했으나 background-size의 cover로 조정할 경우 잘려나가는 부분이 없었으면 합니다. 

 현재 들어간 이미지의 원 사이즈는 1200*300px 이고 sub_wide에서는 이 비율을 유지하고있으나 900px이하가 되면 이마저도 잘리는 상황입니다. 

또 narrow에서도 width:100% 여도 한참 잘립니다. 되도록이면 이미지의 가로는 100%로 출력하고싶습니다. 이럴경우  background의 방법 이 맞는 것인지, 다른방법이 나을지 고민입니다. 그래서 제가 생각한 방법은

    - body-header의 박스사이즈를 반응형으로 변형 (display:flex..?)

    - 이미지 변형을 자바로 하는경우

<script src="picturefill.js"></script>
<script src="matchmedia.js"></script>

 

    이 두가지를 생각해 봤는데 제가 display :flex를 해봤을땐 효과가 나타나지않습니다 ㅠ

 

2. 검색포털에 등록하기위해 포털 검색 로봇코드를 인덱스에 등록했습니다. 

그랬더니  카카오톡등 링크에뜨는 썸네일이 마음대로 되지않습니다. 

<!--네이버 로봇 메타-->
<meta name="robots" content="index">
<meta property="og:type" content="website">
<meta property="og:title" content="뮤스토리 미술학원 MUSTORY ART">
<meta property="og:description" content="뮤스토리 미술학원입니다. 뮤스토리아트, 뮤스토리 미술학원, mustory">
<meta property="og:image" content="http://www.mustoryart.com/_images/step1-1.jpg">
<meta property="og:url" content="http://www.mustoryart.com/">


<!--네이버 로봇 메타-->

이렇게 적용할경우 어떤 문제때문에 제가 원하는 이미지가 안뜨는 것인가요?

 

 

    - 

요청 : 2018년 6월 06일 미분류 분류 내 작성자 animatot (180 포인트)

1 개의 답변

0 투표

1번 질문
=========

백그라운드 이미지와 컨테이너의 완벽한 비율 유지를 하려고 한다면 양쪽 다 같은 비율로 싱크가 일어나야 합니다. 그러다보면 컨테이너의 크기 변화도 발생할 수 있음을 고려해야 합니다.

물론 자바스크립트를 이용한 복잡한 처리가 전제가 되어야 합니다. 그러한 처리를 지원해주는 오픈소스가 있겠지만 꼭 그렇게까지 할 필요가 있을 지는 생각을 좀 해봅시다.

일단은 background-position: center center; 로 추가해 보세요. 비율 유지때문에 좌우측이 잘리는 경우는 있겠지만 배경이미지는 항상 중앙으로 정렬되어 나옵니다. 이것만으로도 크게 무리가 없어 보일 것 같습니다.

 

2번 질문
=========

설정은 문제가 없어 보이지만 이러한 자료들은 로봇의 수집에 의해 처리되기 때문에 각 서비스 업체의 처리 프로세스에 따라 바로 반영이 안 될 수도 있습니다. 조금더 기다려 보고 안되면 다시 체킹하죠.

 

답변: 2018년 6월 06일 작성자 qsadmin (2,100 포인트)