Не загружать изображение с дисплеем: нет

Question

Я не хочу загружать изображение на мобильное устройство, только на рабочем столе.
Я пишу код следовать:
CSS

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

HTML

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

background.jpg изображение не загружено, но изображение head.jpg
Если я добавить

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

такие же. Изображение head.jpg загружается на экране с небольшим разрешением.
Как я могу предотвратить загрузку head.jpg для экономии полосы пропускания?

PS: я тестировал в браузере Chrome

Answer 1

Вы можете посмотреть на setting the image source in css, и положить, что CSS в запросе медиа.

В HTML, не имеют каких-либо источников изображения, то ваш CSS будет что-то вроде этого - установить источник только не для мобильных устройств:

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

Вы, возможно, придется играть с ним в бит, чтобы заставить его работать.

Кроме того, вы должны действительно взглянуть на связанный вопрос - есть много дискуссий о последствиях использования этого метода - и во многих случаях, когда вы не должны его использовать.

Answer 2

Если это возможность изменить разметку, вы можете просто заменить <img /> тег эквивалентным <div> и установить background-image, как вы делали с #line1 элементом.

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

Или вы используете <picture> элемент и установить apropriate источник с max-width условием:

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

Answer 3

Все, что вам нужно сделать, это сделать добавить min-height с высоты вашего Б.Г. изображения. При скрытии дочернего элемента, высота родителя (ДИВ # BG в этом случае) обновляется с самым высоким элементом внутри, так что если нет ни одного элемента, высота 0 (ноль)

@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>