Проблема. В принципе, невозможно использовать полноразмерную фотографию с фоновым изображением соответствующим образом. Различные разрешения, широкоэкранный и т. Д. И т. Д. То, что я ищу, это решение JS / PHP GD для этой проблемы.
Техника Из того, что я слышу, это будет следующим. Javascript просматривает доступные экраны (окно браузера) или разрешение экрана. Проанализируйте это на PHP GD. На FTP вы получите изображение с высоким разрешением (например, 1600×1200). PHP GD оценивает это согласно информации, анализируемой JS. Это также должно работать на Resize.
Поскольку «просто» простой дизайнер, мой недостаток JS / PHP убивает меня по этой проблеме.
Если кто-то может помочь мне с правильным решением, я бы хотел, чтобы он связался с ними на моем новом сайте, как только он закончит. Спасибо заранее и много любви из Голландии.
Фил
В принципе, невозможно использовать фоновое изображение надлежащим образом imo.
Я знаю, что это ваше мнение, но остальная часть Интернета, похоже, не согласна с вами. Они заставляют его работать. Но это, вероятно, не главная проблема.
Изменение размера фона для каждого пользователя, черт, каждый запрос, если вы не кэшируете, собирается наносить ваш сервер в наносекунду. Изменение размера GD дорогое, и если это происходит на общем хостинге, вы в конечном итоге запустили свой сайт. Если на одном сервере есть другие сайты, они замедлят сканирование.
Даже если вы можете выкопать достаточно угля на сервер, это создаст довольно уродливый пользовательский интерфейс. Вместо того, чтобы просто загружать файл, браузеру придется ждать, пока PHP генерирует изображение, и только после этого он может его загрузить.
А что, если я загрузил этот сайт на большом экране? У меня есть возможное разрешение ~ 3840 * 1200. Даже если вы не масштабируете его, мне придется загрузить полную версию. Большой размер экрана не означает, что у меня есть избыточные оптические волокна для моего компьютера.
Но, все, что сказал, это, безусловно, возможно. Я бы посоветовал вам начать с jQuery. Он позволяет подключаться к событиям windows -load и -resize и динамически изменять CSS. Подробные подробности можно выполнить с помощью нескольких простых googles: «php resize image», «jquery onresize» и «jQuery change background».
Вы также можете сделать несколько таблиц стилей CSS, чтобы соответствовать некоторым разрешениям. этот пример UNTESTED может дать вам некоторую помощь.
<html> <head> <title></title> <link rel="stylesheet" id="styleSwitch" href="" /> <script type="text/javascript"> function getStyle(){ var theStyleLink = document.getElementById('styleSwitch'); if (window.innerWidth < 810){ theStyleLink.setAttribute("href", "small-window.css"); } else { theStyleLink.setAttribute("href", "large-window.css"); } } </script> </head> <body onload="getStyle();"> </body> </html> вы можете сделать это полностью с помощью CSS.
Посмотрите на содержимое и обложку: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size