2014-01-23 2 views
1

Ipad 가로보기 모드에서 시작하여 27 mac 인치보기 모드까지 내 이미지를 바닥 글 섹션에 표시하려고합니다. 여기에서 중요한 점은 Google지도와 양식 섹션 사이에서 원하는 점입니다.바닥 글에서 내 img를 반응 적으로 만들려면 어떻게해야합니까?

나는 그것을 절대적으로 위치를 잡으려고 노력했다. 그리고 나는 그것을 Google지도와 양식 섹션 사이에서 얻을 수있다. 그러나 오른쪽에는 스크롤 할 수있는 빈 공간이 있습니다. 내가 말하는 것에 대해 좋은 아이디어를 얻으려면 웹 사이트를 참조하십시오. 나는 양쪽에 스크롤 할 수있는 것을 원하지 않는다. IMG는 위에서 언급 한 모든 화면보기 모드의 전체 너비를 포함해야합니다.

www.fantazihuis.be

HTML

<footer> 
    <img src="images/footer.png" alt="Fantazihuis footer" /> 
</footer> 

CSS 당신은 미디어 querys를 만들 필요가

footer{ 
    margin-bottom: -130px; 
    position: absolute; 
    bottom: 0; 
    width: 100%;} 


footer img{ 
    width: 100%;} 

답변

1

. 당신은 미디어 쿼리에 대한 최대 폭 해상도를 설정하고 각 해상도에게 자신 만의 스타일 시트 제공 :

예 : 브라우저가 제대로 표시되지 않는 한 어떤 미친 이유

@media (min-width: 30em) and (max-width: 60em) { 
    footer { 
     margin-bottom: -60px; 
     position:absolute; 
     bottom:0; 
     width: 100%; 
    } 
} 
+0

나는 미디어 쿼리를 만들어야한다는 것을 이미 알고 있습니다. 이미 내가 가지고있는 바닥 글 구역에 대해 거의 동일한 데이터를 제공했습니다. 앞에서 설명한 것처럼 응답이 없습니다. 예. 화면이 1200px 인 경우 기본적으로 비어있는 웹 사이트의 오른쪽으로 스크롤 할 수 있습니다. 스크롤 할 수 있기를 원하지 않습니다. –

0

합니다. 내 로컬 파일을 내 FTP를 통해 온라인 파일과 동기화 한 후 바닥 글의 IMG가 올바르게 표시됩니다.

CSS는이 경우 정확했으며 조정할 필요가 없습니다. 스크롤 할 수있는 오른쪽이 없었습니다.

그러나 IMG 바닥 글을 포함한 전체 웹 사이트가 다른 화면보기에 반응하도록 미디어 쿼리를 추가해야합니다.

관련 문제