WedX - журнал о программировании и компьютерных науках

Медиа-запросы и фоновые изображения

у меня есть див

<div id="page">

</div>

Со следующим css:

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Я замечаю, что когда я изменяю размер своего браузера, я вижу «мобильный» фон (хорошо), но если я вернусь и сделаю свой браузер большим, мой предыдущий «большой» фон не всегда появляется снова.

Это непостоянная проблема, но это происходит достаточно часто, поэтому я думаю, что мне следует заняться этим.

Есть ли способ обойти эту проблему «фоновое изображение не отображается» или способ изменить размер фоновых изображений, чтобы медиа-запрос «сжал» фоновое изображение, чтобы оно соответствовало новому размеру? Насколько я знаю, нет (широко распространенного) способа изменить размер фонового изображения...

css media-queries
29.02.2012

  • Вы пытались использовать @media (min-width:600px) { background: url('images/white-zigzag.png') repeat-x; } Я не уверен, что это работает, поэтому это комментарий. 01.03.2012
  • Вы, вероятно, уже знаете эту ссылку: css-tricks.com/how-to- resizeable-background-image (изменение размера фонового изображения). 01.03.2012
  • Когда я это делаю, размер изображения не изменяется... то есть я просто вижу часть изображения, а не уменьшенное изображение. 01.03.2012
  • @juanrpozo интересно, но это не фон css: url ... это тег изображения, который стилизован .. может попробовать. 01.03.2012
  • Взгляните на свойство background-size. Это CSS3, но он хорошо поддерживается. Одно из его возможных значений — cover. Это объясняется в первой ссылке статьи, на которую я ссылался. Кстати, какой у вас браузер? 01.03.2012
  • Используя Chrome и Firefox и мобильный Safari... это работает, спасибо! 01.03.2012
  • Хм, вы можете поместить свой ответ в поле для ответов, чтобы я мог проверить его как правильный ответ? 05.04.2012

Ответы:


1

Согласно этому тесту:

Если вы хотите, чтобы только настольная версия изображения загружалась на рабочий стол...

и только мобильное изображение для загрузки на мобильное устройство -

Вам нужно использовать объявление min-width, чтобы указать минимальную ширину браузера для изображения на рабочем столе...

и max-width для мобильного изображения.

Таким образом, ваш код будет:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}
06.06.2013
  • Если это кому-то поможет, проблема, с которой я столкнулся, заключалась в том, что я не включил тег <meta> должным образом, что-то вроде: <meta name="viewport" content="width=device-width, user-scalable=no"> впереди остальной части CSS. 27.01.2016
  • С этим есть проблема: Firefox и Chrome также будут загружать изображение меньшего размера, когда размер области просмотра изменяется (на меньший размер), например. вы начинаете с большего размера экрана (ширина ›= 601px), и браузер загружает увеличенное изображение; затем вы изменяете размер браузера до ширины ‹= 600 пикселей, и ваш браузер также загружает меньшее изображение, что совершенно бессмысленно, потому что у вас уже есть большое разрешение, и теперь вы также дважды загружаете меньшее изображение. Совершенно против логики вещей (экономия полосы пропускания за счет загрузки только самого большого размера, который вам нужен). 29.04.2016
  • @DrunkenMaster вам может понравиться такое поведение, но оно ни в коем случае не нелогично. Браузер не знает, что эти два изображения представляют собой просто разные разрешения одного и того же изображения, многие люди отображают разные изображения в зависимости от того, мобильное это изображение или настольное. Я, например, предпочитаю такое поведение. 06.10.2017

    • 2

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

    #page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}

    Часть медиа-запроса не завершена. Вам все еще нужно предоставить селектор CSS, который вы использовали вне запроса:

    #page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

    Начните с этого и дайте мне знать, если это что-то исправит.

    29.02.2012
  • Извините, это была опечатка с моей стороны... Я исправил свой вопрос выше. 01.03.2012

    • 3

    пожалуйста, используйте

    @media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}
    28.08.2015
  • пожалуйста, объясните, почему ваш ответ улучшит вопрос 28.08.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]