Размер изображения по-разному на телефоне и планшете? - PullRequest
Новая
       7

Размер изображения по-разному на телефоне и планшете?

0 голосов
/ 29 июня 2018

Я работаю над сайтом Wordpress, где у меня есть фоновое изображение, которое служит моим логотипом, а фактическое изображение заголовка прозрачное. Я использую этот код для изменения размера фонового изображения для мобильных устройств: 

@media (max-width: 767px){
body.custom-background {
    background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
    background-position: 50% top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 70% auto;
}

}

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

Есть ли способ изменить размер изображения прозрачного заголовка, но только на телефоне, а не на планшете? И есть ли способ изменить это фоновое изображение по-разному на телефоне или планшете? Этот код устанавливает его на 70%, что прекрасно для планшета, но я бы предпочел больше на телефоне.

Вы можете просмотреть мой сайт здесь , если это необходимо. Я впервые работаю с мобильным макетом. Любая помощь приветствуется! :)

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

@ media (максимальная ширина: 480 пикселей) { добавьте сюда свой CSS для телефонов }

0 голосов
/ 29 июня 2018

Картинки на вашем сайте будут меняться при ширине ниже 420px. Поэтому добавьте это правило к фоновому изображению, может быть, это хорошая идея. 

@media (max-width: 420px)
body.custom-background {
    background-size: 100% auto;
}
0 голосов
/ 29 июня 2018

Если удалить строку: 

background-size: 70% auto;

выглядит нормально для всех экранов.

Это 70%, что уменьшает это изображение - отображайте с использованием 70% ширины экрана. Линия: 

background-position: 50% top;

держит изображение по центру и вверху страницы. Когда вы удаляете background-size, изображение остается в полном размере и по центру, что я думаю, выглядит хорошо на мобильном телефоне. Он только начинает обрезать края изображения, но текст логотипа не затрагивается.

Чтобы предотвратить обрезку логотипа, нам нужно немного подумать. При ширине 640 пикселей и использовании правила 70% фоновое изображение выглядит почти точно в полном размере при 450 пикселей. Итак, нам нужно два правила: 

@media only screen and (max-width: 640px) {
    body.custom-background {
        background-size: auto;
    }
}
@media only screen and (max-width: 450px) {
    body.custom-background {
        background-size: 100% auto;
    }
}

Это означает, что между 450px и 640px фон будет отображаться в своем первоначальном размере - 450px. Затем, когда экран меньше 450 пикселей, он содержится, поэтому ширина экрана уменьшается до 100%. Теперь на экранах меньшего размера фоновое изображение соответствует исходному размеру или полной ширине экрана - оно больше не обрезается.

...