Динамические фоновые изображения PHP GD - PullRequest
Новая
       24

Динамические фоновые изображения PHP GD

0 голосов
/ 21 января 2009

Задача По сути, невозможно использовать полноразмерную фотографию с фоновым изображением надлежащим образом. Различные разрешения, широкий экран и т. Д. И т. Д. Что мне нужно, так это решение JS / PHP GD для этой проблемы.

Техника Из того, что я слышу, это будет следующим. Javascript ищет доступный размер экрана (окно браузера) или разрешение экрана. Разбирает это в PHP GD. На FTP вы получите изображение в высоком разрешении (например, 1600x1200). PHP GD масштабирует это в соответствии с информацией, проанализированной JS. Это также должно работать на Resize.

Поскольку я «просто» простой дизайнер, отсутствие JS / PHP убивает меня из-за этой проблемы.

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

Phil

Ответы [ 3 ]

3 голосов
/ 21 января 2009

В принципе, невозможно использовать фоновое изображение должным образом, imo.

Я знаю, что это ваше мнение, но остальная часть Интернета, похоже, не согласна с вами. Они заставляют это работать. Но это, вероятно, не главная проблема здесь.

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

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

А что, если я загрузил этот сайт на большом экране? У меня есть возможное разрешение ~ 3840 * 1200 здесь. Даже если вы не увеличите масштаб, мне придется скачать полную версию. Большой размер экрана не означает, что у меня есть избыточные оптические волокна к компьютеру.

Но, несмотря на все это, это, безусловно, возможно. Я бы порекомендовал вам начать с JQuery. Это делает подключение к событиям window -load и -resize и динамическое изменение CSS довольно простым. Мелкие детали можно получить с помощью нескольких простых гуглов: «php resize image», «jquery onresize» и «jquery change background».

0 голосов
/ 10 февраля 2016

Вы можете сделать это полностью с помощью CSS ..

Посмотрите на содержимое и обложку: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Бонус: http://blog.geneticcoder.com/2015/12/09/rotate-and-cross-fade-background-images-with-jquery-css-background-opacity-trick/

0 голосов
/ 21 января 2009

Вы также можете сделать несколько таблиц стилей CSS, чтобы соответствовать некоторым разрешениям. этот НЕПРОВЕРЕННЫЙ пример может вам помочь. 

<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>
...