큰 이미지가있는 반응 형 Navbar

나는 지금까지 내가 수행하고 싶은 유일한 것을 달성 한 반응 형 탐색 표시 줄을 만들려고 노력하고 있습니다. Navbar가 작은 창에서 어떻게 보이는지 수정하는 것입니다.큰 이미지가있는 반응 형 Navbar

small resolution에서 알 수 있듯이 작은 해상도가되면 navbar가 이미지를 겹칩니다.

데스크톱 해상도를 사용하는 경우에는 enter link description here 오른쪽의 탐색 표시가 제대로 보이지 않습니다.

누구든지 나를 고칠 수있는 자료를 가르쳐 줄 수 있거나 누군가 내가 내가 바꿀 필요가있는 것을 설명 할 수 있다면 그것을 설명 할 수있다.

또한 누구나 내 코드를 연결하여 내 사람들이 내가 한 일을 더 쉽게 볼 수 있도록 할 수 있습니다.

감사합니다.

출처

2017-09-10 John Alex

다음은 로고에 사용할 수있는 몇 가지 기술입니다.

이미지 태그에서 너비 또는 높이 특성을 제거한 다음 뷰포트 너비에 따라 크기를 조정합니다. 예를 들어

HTML 당신이 당신의 헤더에 하나 개 이상의 이미지 태그를 추가 할 수

<div class="header"> <img src="logo.jpg" class = "logo"> </div>

CSS

.logo{ 
    width:50vw; 
    max-width:500px; 
}

, 데스크탑 용 및 모바일 용입니다. 각각에 대해 다른 클래스를 사용하면 CSS 미디어 쿼리를 사용하여 뷰포트 너비를 기반으로 한 번에 하나의 로고를 숨기거나 표시 할 수 있습니다.

HTML 나의 마음에 드는 기술의

.logo{ 
    display: none; 
} 


.logo.mobile{ 
    display:block; 
} 


@media (min-width: 768px) { 

    .logo.mobile{ 
     display:none; 
    } 
    .logo.desktop{ 
     display:block; 
    } 

}

하나가 이미지 태그를 사용하는 대신 배경 이미지를 사용하는 것입니다
```
<div class="header"><img src="logo-desktop.jpg" class = "logo desktop"> <img src="logo-mobile.jpg" class = "logo mobile"> </div> 
```
CSS. 이렇게하면 필요한 경우 텍스트를 쉽게 오버레이 할 수 있으며, 미디어 쿼리를 사용하여 여러 뷰포트에서 서로 다른 이미지를 정의하고 하나만 다운로드하게되므로 모바일에서 효율적입니다.

이 정보가 도움이 되었기를 바랍니다.

출처

2017-09-10 13:07:51

큰 이미지가있는 반응 형 Navbar

답변

관련 문제