根据特定分辨率使用变量编辑 img src 样式

Question

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

我网页上的默认 header 大小是 1500x500，而在较低分辨率（笔记本电脑）上，这个 1500 显然是个问题。我有一个宏需要这个 header 分辨率，但该宏运行并以 1600x900 屏幕分辨率编写。

所以思考过程是这样的：

获取屏幕分辨率。（完成）
为 1600x900 设置一个 IF 屏幕分辨率，它会在我拥有该分辨率时识别并执行某些操作，否则，执行其他操作。（完成）
在 if 中更改图像 width/height。 (问题)

所以我在实际做某事时遇到了问题。

<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 的结果。

我真的没有学过这门语言。

Answer 1

成功了。完整代码：

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

现在 header 对除理想的 1600x900 以外的所有分辨率都有响应。无论如何，在 chrome 上。快速查看边缘，似乎无法识别分辨率。对此代码的任何改进持开放态度。

根据特定分辨率使用变量编辑 img src 样式

Editing img src style with variables based on specific resolutions

html

php

image

src