페이지 너비에 따라 HTML/CSS 헤더 이미지를 어떻게 변경합니까?

Question

내 웹 사이트에서는 Photoshop에서 머리글 이미지를 디자인하고 싶습니다. max-width:100%을 통해 반응적입니다. 그러나 모바일 화면 너비에서는 다른 크기의 이미지로 바뀌어야하며 그 크기의 화면에 더 적합합니다. 어떻게 HTML이나 CSS로 할 수 있습니까?

Answer 1

이 같은 뭔가를 할 수 Media Query을 사용하거나 당신이 당신의 요구에 맞게 하나에 폭을 변경할 수 있습니다

는

@media (max-width: 768px) { 
    .className { 
    //style goes here; 
    } 
} 

확인이 Link 그것은 당신에게

Answer 2

대신 img 태그를 사용하여 배경 이미지를 도움이 될 것입니다 헤더에 대해 src를 변경하고 미디어 쿼리에서 src를 변경하십시오.

@media only screen and (min-width : 1200px) { 
    .header{ 
     background-image: url('img/myimg.jpg'); 
    } 
} 
@media only screen and (min-width : 992px) { 
    .header{ 
     background-image: url('img/myimg2.jpg'); 
    } 
} 

@media only screen and (min-width : 320px) { 
     .header{ 
      background-image: url('img/myimg3.jpg'); 
     } 
    } 

Answer 3

핵심 CSS와 HTML을 사용하는 경우 헤더에 배경 이미지를 사용하고 배경 크기를 수정하십시오.

.header{ 
     background-image: url('img/myimg.jpg'); 
     background-size:100% 100%; 
    } 

이렇게하면 디스플레이 크기에 따라 배경보기가 조정됩니다.

대신 가장 잘보기 위해 부트 스트랩 클래스를 사용할 수 있습니다.

부트 스트랩 클래스 사용 : 을 작은 화면의 경우 :

<img id="logo" class="img-responsive hidden-lg hidden-md hidden-sm visible-xs" src="Images/small-header.png" /> 

을 대형 화면의 경우 :

<img id="logo" class="img-responsive hidden-xs" src="Images/large-header.png" /> 

당신은 화면의 다른 크기에 대해 서로 다른 크기와 이미지를 사용할 수 있습니다.

xs = Extra small, 
sm = small, 
lg = large, 
md = medium, 

더 나은 지식을 얻으려면 부트 스트랩을 참조하십시오.

여기에서 답을 찾을 수 있습니다

Answer 4

http://anzblog.com/2017/05/15/change-htmlcss-header-image-depending-page-width/

당신은 srcset``사용할 수