Редактирование стиля img src с переменными в зависимости от разрешения - PullRequest
Новая
       42

Редактирование стиля img src с переменными в зависимости от разрешения

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

Я пытаюсь сделать что-то, что, как мне показалось, будет намного проще, но у меня возникают проблемы.

Размер заголовка по умолчанию на моей веб-странице 1500x500, а на более низких разрешениях (ноутбуках) это 1500, очевидно,проблема.У меня есть макрос, который требует именно этого разрешения заголовка, и этот макрос запускается и был записан с разрешением экрана 1600x900.

Итак, мыслительный процесс был таким:

  • Получить экранразрешающая способность.(Готово)

  • Сделайте разрешение экрана ПЧ для 1600x900, где он будет распознавать, когда у меня есть это разрешение, и что-то делать, иначе делать что-то еще.(сделано)

  • Изменить ширину / высоту изображения в if.(Проблема)

Итак, фактическое выполнение чего-то, с чем у меня проблемы

<center>
    <?php
        session_start();
        if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height']))
            {
                echo 'User resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
            } 
            else 
            if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) 
            {
                echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
            }
    ?>

    <?php if ($_SESSION['screen_width'] == 1600 && $_SESSION['screen_height'] == 900)
    {
         //Don't change style, this is a resolution we want precise width on
        $width1 = 500 +"px";
        $height1 = 50 +"px";
    }
    else
    {
          //Change style, any other resolution we go for 100%
        $width1 = 100 +"%";
        $height1 = 100 +"%";
    }
    ?>

  //This is the header/image in question. 
  src="https://i.imgur.com/rGEjK9e.png" style.width = width, style.height = 
  height1;>
    </center>

  //This is the old header image code.
 <center>
<img src="https://i.imgur.com/C4KSU7g.png" alt="" style="width:1500px;height:500px;”>
</center>

У меня есть эхо, показывающее, что my if работает и что он знает размер моего экрана, но я хочу теперь заставить его изменить только 1 конкретную ширину / высоту изображения в результате этого IF,

Меня не очень учат этому языку.

1 Ответ

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

Получил это работает.Весь код: 

    <center>
<?php
    session_start();
    if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height']))
    {
        //echo 'User resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
    }
    else if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) 
    {
        $_SESSION['screen_width'] = $_REQUEST['width'];
        $_SESSION['screen_height'] = $_REQUEST['height'];
        header('Location: ' . $_SERVER['PHP_SELF']);
    } 
    else
    {
        //echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
    }
?>

<?php if ($_SESSION['screen_width'] == 1600 && $_SESSION['screen_height'] == 900)
{
     //Don't change style, this is a resolution we want precise width on
    $width1 = "1500"."px";
    $height1 = "500"."px";
    //echo $width1;
    //echo $height1;
    //echo "Header won't change";
}
else
{
      //Change style, any other resolution we go for 100%
    $width1 = "100"."%";
    $height1 = "100"."%";
    //echo $width1;
    //echo $height1;
    //echo "Header will change";
}
$text = "<img src='https://i.imgur.com/rGEjK9e.png' style='width:$width1;height:200px></center>";

preg_match_all("/<img.*>/",$text,$out);
foreach($out as $t1)
{
    foreach($t1 as $img)
    {
        preg_match("/.*height:(.*?);width:(.*?);.*/",$img,$out2);
        $height = $out2[1];
        $width = $out2[2];
        $text = str_replace($out2[0],str_replace("<img","<img width='" . $width1 . "' height='" . $height1 . "'",$out2[0]),$text);
    }
}
echo $text;
?>

Исправлено несколько вещей и найдено это str_replace.Установите ваши ссылки на изображения в виде текста и пропустите их через эту проверку, повторите текст, и он будет работать как-то.Не уверен, почему я не мог установить высоту / ширину сам, но это работает, поэтому я не жалуюсь.

Мои переменные не добавляли ранее «px» и «%», +, очевидно, не работает, вы должны использовать., Т.е. «100». «Px»

Теперь заголовок отзывчив на все разрешения, кроме 1600x900, что идеально.Во всяком случае, на хром.Быстрый взгляд на край, и кажется, что он не распознает разрешение.Открыты для любых улучшений этого кода.

...