헤더 이미지가 다른 화면으로 확대되지 않음

header div 안에 이미지가 있습니다. background-size: 100% 100%을 설정했지만 휴대 기기에서는 스케일링이 전혀 이루어지지 않습니다. 모든 기기에서 이미지를 동일하게 유지하고 싶습니다. 여기에 전체 CSS입니다 :헤더 이미지가 다른 화면으로 확대되지 않음

background: url(Oly1600x600.jpg) no-repeat center center; 
background-size: 100% 100%; 
height: 600px; 
position: relative; 
overflow: hidden;

나는 background-size: cover를 사용하여 시도하고 그것은 상단과 하단에서 많이 차단에 전체 이미지를 확대. 스케일링이란 데스크톱 브라우저, 모바일 장치 및 태블릿과 같은 모든 장치에 원본 이미지를 표시하고자하는 것입니다. 완전히 표시 할 수없는 경우 이미지가 왜곡되어서는 안됩니다 (예 : 늘어짐). 희망을 좀 지워줍니다.

편집 : https://www.heroesjourney.com/olympic-weightlifting

어떤 제안 : 다음 페이지에 대한 링크가있어?

출처

2016-10-31 Rodney Wilson

는 "이 확장되지 않는다"무엇을 의미합니까? 'background-size'가'div' 크기를 제어 할 것으로 기대하십니까? – henry

이미지 요소입니까, 아니면 배경 이미지가있는 다른 요소입니까? 스케일링이란 무엇을 의미합니까? 화면 비율에 대해 이야기하고 있습니까? 신뢰할 수있는 답을 원할 경우 질문에 더 많은 세부 정보/선명도를 추가해야합니다. – DBS

@DBS 업데이트 된 질문. –

을 사용하여 '배경 크기 : 덮개;' 귀하의 스케일링 문제를 해결해야합니다, 나는 당신이 빈 공간없이 컨테이너를 채우기 위해 이미지를 원한다고 가정합니다.

출처

2016-10-31 14:53:33

background-size : 표지를 사용하여 시도했지만 전체 이미지가 확대되었습니다. –

Humm은 jsFiddle을 설정하여 진행 상황을 볼 수 있습니까? 에? –

다음은이 페이지로 연결되는 링크입니다. https://www.heroesjourney.com/olympic-weightlifting –

이 시도 : background-size: cover;

출처

2016-10-31 14:52:43

background-size : cover를 사용하여 시도했지만 전체 이미지를 확대했습니다. –

.img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
}

링크 : - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries 또는

#header img{ 
      max-width: 80%; 
    }

출처

2016-10-31 14:54:59

헤더 이미지가 다른 화면으로 확대되지 않음

답변

관련 문제