Запрос CSS Media | Ответственность изображения

Я изучал, как правильно использовать медиа-запросы, ниже - сайт, на котором я пытаюсь реагировать. Тем не менее, я нахожу, что проблемы с адаптацией образом моей картины, я могу проверить отзывчивость на моем компьютере, который находится в 17 дюймов, а также на моей Галактике 5.Запрос CSS Media | Ответственность изображения

** редактировать, проблема решена для меня

.background-image { 
    position: fixed; 
    z-index: 1; 
    background:url(nycgold.jpg) fixed; 
    background-size: cover; 
    background-position: center; 
    padding-top: 13%; 
    padding-bottom: 100%; 
    font-family: 'Montserrat', sans-serif; 
} 

@media only screen and (max-width: 320px) { 
    /* styles for narrow screens */ 
    .background-image{ 
     width: 100%; 
     height: auto; 
    } 
} 

@media only screen and (max-width: 1800px) { 
    /* styles for MacBook Pro-sized screens and larger */ 
    .background-image{ 
     width: 100%; 
     height: auto; 
    } 
}

Любая помощь приветствуется.

источник

2016-03-13 y17

Вы ничего не меняете, ширина по-прежнему 100%, что именно вы хотите сделать? –

Я думаю, что то, что вы пытаетесь сделать, может быть сделано с помощью фонового размера: обложка и нет необходимости в медиа-запросах. Ознакомьтесь со следующей скриптой: https://jsfiddle.net/wamosjk/rqgLax2p/ –

@SamirChahine. Для меньшего MQ я просто поместил этот код в качестве заполнителя, так как я пробовал другие вещи, но это не сработало. Чтобы ответить на ваш вопрос, я пытаюсь сделать изображение на сайте единообразным, без повторений и приспосабливаться к размеру экрана для небольших дисплеев. Однако, если вам нужно уменьшить ширину сайта, будет отображаться изображение моего изображения дважды, и я не хочу этого. Я не знаю, что добавить в класс, когда размер экрана мал. – y17

Во-первых, у вас есть 3 стиля здесь:

стиль по умолчанию
Стиль для максимальной ширины: 320px
Стиль для максимальной ширины: 1800px

Но все три стиля задают фоновое изображение одинакового размера. Фоны на самом деле не то, что вам нужно написать отзывчивый код, потому что они обычно стараются соответствовать области рендеринга браузера, но background-size:cover, установленный один раз в главном стиле, попросит браузер заполнить фон всем изображением, поэтому установка ширины isn ' t необходимо.

См.: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size для получения дополнительных сведений об объекте CSS.

Чтобы проверить свои медиа-запросы, убедитесь, что для них есть РАЗНЫЕ значения, установленные для них, и используйте то, что лучше подходит для реагирования, например изображение на переднем плане. <img src=""> или размер текста элемента.

источник

2016-03-13 17:32:43

Если то, что вы хотите для фона, чтобы показать один раз, без повторений, добавьте этот background-repeat: no-repeat;

Кроме этого, ваше изображение должны соответствовать всей ширине, независимо от размера Музейного есть.

источник

2016-03-13 17:34:51

Запрос CSS Media | Ответственность изображения

ответ

Смежные вопросы