디스플레이에 이미지를로드하지 않음 : 없음

Question

모바일 장치에서 이미지를로드하지 않고 데스크톱에서만로드합니다.

@media only screen and (max-width: 480px) { 
div#line1 {display: none} 
} 

이미지 background.jpg가로드되지

<div id="line1" style=" background-image:url(/background.jpg);"> 
<img src="/head.jpg" /> 
</div> 

HTML하지만 이미지 head.jpg가 내가 추가
경우
CSS :
나는 추적 코드를 작성

div#line1 img {display: none} // for < 480 px 

동일합니다. 이미지 head.jpg가 작은 해상도 화면에로드 중입니다.
대역폭을 절약하기 위해 head.jpg를로드하지 못하게하려면 어떻게해야합니까?

PS : 나는

Answer 1

당신은 setting the image source in css에서보고, 미디어 쿼리 내에서 그 CSS를 넣을 수있는 크롬 브라우저에서 테스트. 당신은 그것을 바이올린 할 수 있습니다

@media (min-width: 480px) { 
    div#line1 img { 
     content: url("/head.jpg"); 
    } 
} 

: 비 모바일 기기에만 소스를 설정 - html로에서

는, 모든 이미지 소스가없는, 당신의 CSS는 다음과 같이 될 것입니다 조금이라도 그것을 작동 시키려면.

또한 링크 된 질문 -이 방법을 사용할 때의 결과에 대해 많은 논의가 있어야하며 사용하지 않아야하는 경우가 많습니다.

Answer 2

이 마크 업을 수정하는 옵션 인 경우, 당신은 단지 동등한 <div>하여 <img /> 태그를 대체 할 수있는 당신이 #line1 요소와 함께했던 것처럼 background-image을 설정합니다.

<div id="line1" style=" background-image:url(/background.jpg);"> 
    <div class="inner-image></div> 
</div> 

가 아니면 <picture> 요소를 사용하여 max-width 조건으로 apropriate 소스를 설정 : 당신이해야 할 모든이

<picture> 
    <source srcset="/head.jpg" media="(max-width: 480px)"> 
    <img src="/dummy-image.jpg" /> 
</picture> 

Answer 3

당신의 BG 이미지의 높이와 min-height를 추가 마십시오.

@media only screen and (max-width: 480px) { 
 
    img#head {display: none} 
 
    div#bg {min-height: 150px;} 
 
}

<div id="bg" style="background-image:url(http://placehold.it/350x150?text=bg); background-repeat:no-repeat;"> 
 
    <img id="head" src="http://placehold.it/350x150?text=head" /> 
 
</div>

당신은 자식 요소를 숨길 때, 부모의 높이 (이 경우 DIV 번호의 BG는) 내부의 가장 높은 요소로 업데이트됩니다, 그래서 요소가 존재하지 않는 경우는, 높이가 0 (영)