使用基于特定分辨率的变量编辑img src样式

时间:2018-06-05 12:50:27

标签: php html image src

我正在尝试做一些我认为会更简单但我遇到问题的事情。

我的网页上的默认标题大小是1500x500,而在较低分辨率(笔记本电脑)上,这1500显然是一个问题。我有一个特别需要这个标题分辨率的宏,并且该宏运行&是以1600x900的屏幕分辨率写的。

所以思考过程是这样的:

  • 获取屏幕分辨率。 (完成)

  • 为1600x900执行IF屏幕分辨率,它会识别我何时拥有该分辨率并执行某些操作,否则执行其他操作。 (完成)

  • 在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>

我有回声显示我的if是有效的,并且它知道我的屏幕尺寸,但我现在想让它只改变1个特定的图像宽度/高度作为IF的结果。

我没有真正用这种语言教过。

1 个答案:

答案 0 :(得分:0)

搞定了。整个代码:

    <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以外的所有分辨率,这是理想的。无论如何,在chrome上。快速查看边缘,似乎无法识别分辨率。打开此代码的任何改进。