0

프리앰블 :Wordpress - 모바일 용 헤더 이미지 크기 조정 방법

다소 반응이 빠른 주제 (골격)를 사용하고 있습니다. 는 작은 화면 크기에 대해 하나의 컬럼 레이아웃을 변경

내 문제는 다음과 같습니다

내 헤더 이미지 화면 크기를 조정할 때 확장되지 않는다 (내가 관리자 패널에서 테마 옵션을 사용하여 삽입 된 것을) . 항상 940x150으로 유지됩니다. 모바일에서 볼 때 왼쪽에 단일 열에 내용이 포함 된 전체 크기의 헤더가 표시되므로 모든 종류의 공백이 남습니다.

나는 싶습니다 :

또는

작은 화면 크기에 맞게 의미 하나를 사용하여 헤더 이미지를 대체 화면 폭 축소 이미지를 발생합니다.

옵션 2의 문제는 모든 장치가 동일한 화면 너비를 갖는 것은 아니므로 지점까지 확장이 가능해야합니다.

이상적 :

아래 명시된 폭 이상, 이미지가 700 일 (아이 패드 가로) 사이의 화면과 940 표준에 맞게 확장 할 수

.

특정 화면 너비 아래 (예 : 태블릿/ipad 크기, 최대 700 가지 최대 폭)라고 말하면 이미지는 더 작은 이미지로 바뀌고 300-700 크기 사이에서 위로 또는 아래로 조정됩니다 ipad 크기 이하).

이런 식으로 이미지는 항상 사이트 렌더링에 알맞은 크기입니다.

이 특정 이미지의 문제점은 중간에있는 공백 (빈 공간)의 양입니다. 어떤 폭 아래에 , 나는 이미지의 요소가 그들 사이의 공간이 너무 많아 지거나 엉망이 될 것이라고 생각합니다.

사이트 :

porthuronairportshuttle.com

답변

5

는 CSS를이 추가 :

img { 
height: auto; 
max-width: 100%; 
} 
0

나는 그것을 알아 냈다. 실제로 테마 옵션으로 업로드 한 헤더를 제거하고 wp 핵심 기능으로 업로드하는 것이 었습니다. 그런 다음 header.php의 탐색 막대를 움직였습니다. 여백과 패딩이있는 몇 가지 조작을 한 후 - poof!