미디어 쿼리의 장치 높이가 서로 다릅니다.

다른 장치에 페이지를 처음으로 표시 할 때 특정 높이가 있습니까? 페이지를로드 할 때 헤더 이미지를 표시하고 스크롤하면 더 많은 내용이 표시됩니다. 미디어 쿼리를 사용하여 다른 장치의보기 영역에 이미지를 맞추려면 너비를 100 %로 사용하지만 높이는 이해하는 데 문제가 있습니까?미디어 쿼리의 장치 높이가 서로 다릅니다.

출처

2014-11-18 parsa

왜 '높이 : 100 %'를 사용하지 않습니까? – Anubhav

그러나 100 % 높이가 기본 이미지 높이가됩니다 – parsa

바이올린을 사용하면 문제를 해결하는 데 도움이 될 것입니다 – Anubhav

너비가 100 %로 설정된 경우 높이를 자동으로 설정해야합니다. 이미지는 반응 형이며 변형하지 않고 다른 화면 해상도로 조정됩니다.

출처

2014-11-18 22:49:33 Faron

인라인 너비와 높이를 넣고 가로 : 100 % 및 높이 : auto로 바꾸어야합니까? 그렇지 않으면 이미지가 내 콘텐츠 높이에서만 게재됩니다. – parsa

나는 당신의 질문이 정확히 무엇인지 완전히 이해하고 있는지 확신하지 못합니다. 내 이해는 사이트의 상단에 이미지를 배치하여 반응이 빠르고 기기에 따라 자동으로 크기를 조정하려고하는 것입니다. 당신이해야 할 일은 스타일 시트에 클래스를 사용하고 너비를 가리키는 작은 CSS를 쓰는 것입니다 : 이미지가 장치의 너비에 걸쳐 있음을 의미하는 100 %, 높이 : auto로 지정하면 이미지의 크기가 이미지 폭에 따라. 페이지의 높이 (페이지의 내용에 따라 결정됨)를 설정할 필요가 없습니다. – Faron

코드를 게시하기 위해 편집을 고려해 볼 수 있습니다. CSS3 백그라운드 속성으로 솔루션을 얻었습니다. 하지만, 여전히 이해할 수없는 것은 동일한 크기의 이미지에 대해 미디어 쿼리를 사용할 때입니다. 배경 이미지의 표준 치수가 있습니까? 어쨌든 CSS3 배경 속성을 사용하여 이미지를 반응 적으로 만들 수 있다는 것을 알고 있습니다. 즉, 각 장치의 치수를 알고 싶습니다. – parsa

둘 다 감사합니다!

높이를 위해 싸우는 대신 CSS3 배경 이미지 속성을 사용했습니다. 문제가 해결되었습니다. :)

출처

2014-11-19 20:59:17 parsa

미디어 쿼리의 장치 높이가 서로 다릅니다.

답변

관련 문제