Как узнать размер фонового изображения для содержимого переменной высоты? - PullRequest
Новая
       12

Как узнать размер фонового изображения для содержимого переменной высоты?

0 голосов
/ 31 января 2020

Я не мог придумать хорошего заголовка, извиняюсь.

Я разрабатываю персональный сайт, который имеет 4 раздела внутри главной. Внутри каждого раздела есть заголовок и сетка. Фон каждого раздела - изображение. Я беру действительно большие изображения и обрезаю их до правильного соотношения сторон, масштабирую, а затем присваиваю их соответствующему разделу.

В настоящее время я проектирую для мобильных устройств, но я уверен, что проблема в том, вездесущий по размерам экрана. Моя проблема в том, что когда я устанавливаю ширину и высоту изображений, а затем перемещаюсь для проверки на другом устройстве (например, iPhone X для Pixel XL), в нижней части раздела после фонового изображения появляется пробел. Это потому, что изображение слишком короткое.

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

How do I know how large to make my images?

Нужно ли мне смотреть на размеры контента на каждом устройстве и выбирать самое большое? Должен быть лучший способ, верно? Причина, по которой я не хочу просто масштабировать изображение до 100% фона, заключается в верности (это имеет значение!).

Надеюсь, этого достаточно, если это не так, я буду рядом. Спасибо!

Редактировать для уточнения:

Возможно, мне неясно. Я буду использовать медиа-запросы для больших размеров экрана, где я буду использовать большие изображения. Вот пример для пояснения:

Предположим, моя первая точка останова достигла 568 пикселей. Под этим значением есть ряд устройств. Однако то, что они попадают в одну точку разрыва, не означает, что они имеют одинаковую высоту и ширину.

Допустим, устройство A имеет ширину 320px и высоту 600px, а устройство B имеет ширину 400px и высоту 650px , На устройстве A первый раздел моего веб-сайта имеет ширину 320 пикселей и высоту 800 пикселей. На устройстве B первая часть моего веб-сайта имеет ширину 400px и высоту 750px.

Я мог бы создать изображение шириной 400px и высотой 800px, и это удовлетворяло бы фоновым условиям для обоих устройств. Однако я не могу практически go пройти через каждое существующее устройство, чтобы найти наибольшую ширину для определенного раздела и наибольшую высоту для определенного раздела. Я также не могу быть уверен, что мой контент не изменится, и в этом случае мне придется повторить процесс.

Есть ли способ сделать это без потери качества изображения, без обрезки содержание, и с сохранением разумно того же отступа и полей вокруг элементов? Или, может быть, я думаю об этом неправильно?

Надеюсь, это поможет прояснить это. Спасибо за ответы, которые я уже получил!

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

Ответы [ 2 ]

1 голос
/ 31 января 2020

Мы можем сделать это только через CSS благодаря свойству background-size, которое теперь доступно в CSS3. Мы будем использовать элемент html (лучше, чем body, так как он всегда равен высоте окна браузера). Мы устанавливаем на нем фиксированный и центрированный фон, затем корректируем его размер, используя background-size для ключевого слова cover. 

html { 
  background: url(XXX) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Примечание. Скопируйте URL-адрес в область XXX, например: images/bg.jpg. Затем скопируйте и вставьте вышеприведенное в свою таблицу стилей CSS.

Работает в: - Safari 3+ - Chrome Что бы ни + - IE 9+ - Опера 10+ - Firefox 3,6+

Надеюсь, это поможет.

0 голосов
/ 31 января 2020

Вы можете выполнить sh это с помощью @Media Queries в вашем CSS.

Если экран большего размера - например, компьютер. Вы можете иметь свой обычный CSS, показывающий фоновое изображение. Когда размер экрана изменяется, и вы замечаете, что при определенном размере экрана (например, на экране телефона) изображение выглядит неправильно, вы можете добавить медиазапрос к вашему CSS, который выглядит примерно так: 

@media only screen and (max-width: 600px) {
  body {
    background-image: url("IMAGEURL.jpg");
  }
}

На устройствах, которые равны или не превышают максимальную ширину 600 пикселей, CSS переопределит ваш основной CSS. Вот как адаптивные сайты создаются постоянно. Вы можете иметь столько медиа-запросов, сколько захотите. Есть и другие способы написания медиазапросов. Надеюсь, что это отвечает на ваш вопрос!

Ознакомьтесь с этим учебником, найденным здесь, в W3schools. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

...