배너 이미지 크기를 뷰포트의 사용 가능한 공간에 비례하여 조정하십시오.

Google 크롬을 사용하여 화면 크기를 900px보다 작게 만들면 배너 크기가 900px 너비와 150px입니다. 비례 배율처럼 자동으로 조정하고 싶습니다.배너 이미지 크기를 뷰포트의 사용 가능한 공간에 비례하여 조정하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1"> .........some other code...... 

.banner { 
    background: silver; 
    padding: 20px 0; 
    max-width: 100%; 
    overflow: auto; 
}

는 내가 추구하고 무엇을 달성하기 위해 제안 될 것이다 : 이것은 내가 사용하고있는 코드?

출처

2017-12-05 Tautvydas Daunoravičius

지금은 무엇이 있습니까?

시도 : 너비 : 100 %; 최대 너비 : 900px

출처

2017-12-05 18:35:17 Tom

전체 배경이 은색으로되어 있지만 사진의 너비는 동일하고 전혀 확장되지 않으므로 전체가 축소됩니다. 텍스트가 축소 된 것처럼 축소됩니다. 전체 은색 배경의 길이와 왼쪽 및 오른쪽 테두리의 테두리에 맞게 사진 크기를 조정하십시오 (경계선에 따라 전체 내용이 레이아웃 됨). –

img.banner {width : 100 %; 최대 너비 : 900 픽셀} – Tom

아래에 설명 된 코드를 고려하십시오. 처음에는 배너가 900px 및 높이의 너비로 설정됩니다 (필요에 따라 조정할 수 있음). 화면 크기가 900px에 도달하면 아래에 표시된 것과 같이 상대 값을 백분율 (%) 또는 vw (보기 - 너비)로 바꿀 수 있습니다. 희망, 도움이됩니다. 아래 예제 코드 :

#banner{ 
 
width:900px; 
 
} 
 
@media only screen and (max-width: 900px) { 
 
    #banner { 
 
    width: 90%; 
 
    } 
 
}

<img id="banner" src="https://d33wubrfki0l68.cloudfront.net/557d279498d303f3206fae0af97a62f3625ebf4e/c3c0d/images/header/leargas-banner-900px.png"/>

출처

2017-12-05 18:37:18

내 문제는 내가 단지 .banner를 참조 하였다는이 지침에 명확했다. 쓴 때 .banner img {max-width: 100%} 효과가있었습니다. overflow을 maxwidth으로 삭제하고 .banner에 삭제했습니다.

출처

2017-12-05 18:52:38

배너 이미지 크기를 뷰포트의 사용 가능한 공간에 비례하여 조정하십시오.

답변

관련 문제