我如何使 PHP/HTML 图像在点击时显示原始大小？

Posted 2023-03-23

【中文标题】我如何使 PHP/HTML 图像在点击时显示原始大小？

【英文标题】：How i make PHP/HTML images show original size onclick?

【发布时间】：2019-04-24 20:26:30

【问题描述】：

我正在开发一个包含文本和图像的新闻部分，其中要单击的图像必须显示其原始大小。有人可以帮我解决这个问题吗？

    <?php
  $select_stmt=$db->prepare("SELECT * FROM teste ORDER BY id DESC;" );  //sql select query
    $select_stmt->execute();
    while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
    
?>
<div class="container" id="fadein">
  <div class="row">
    <div class="col-sm-4">
        <div id="imagem"><img src="upload/<?php echo $row['image']; ?>" class="imagem"></div>
        <script src="scripts/javascript.js"></script>
    </div> 
        <div class="col-sm-8">
            <div class="col-sm-12" id="titulo"><?php echo $row['titulo'];?></div>
            <br>
            <div class="col-sm-12" id="sub_titulo"><?php echo $row['sub_titulo'];?></div>
            <br>
            <div class="col-sm-12" id="texto"><?php echo $row['texto'];?></div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-6" align="right"><a href="edit.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning">Editar</a></div>
        <div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger">Eliminar</a></div>
    </div>
    <br>
    <br>
    <br>
    <p class="barra"></p>
    <br>
    <br>
</div>
<?php

?>

【问题讨论】：

你可能需要 javascript 来完成这个

你想如何显示它们？在同一页面上还是在弹出的窗口中？请澄清你的问题。还要添加您到此为止的尝试。

我想在同一页面显示原图

【参考方案1】：

（可能第二部分对您的用例更有用） 如果你想要纯 javascript，你可以设置一个 onclick 事件监听器并获取图像的真实大小（Determine original size of image cross browser?）并将这个大小设置为 image。 （如果您希望在第二次单击时将其设置为旧尺寸，请将旧尺寸保存到全局变量中，然后进行设置）。如下所示：

我不擅长纯 JavaScript，但我想就是这样。 在文件中的某处添加此代码。它将针对每张图片运行

<script>
    window.onload = function() 
        images = document.getElementsByTagName("img");
        for (var i = 0; i < images.length; i++)
            images[i].onclick = function(e)
                var isBig = e.target.getAttribute('isBig');
                if (isBig === undefined || isBig == 'false')
                    // make it big
                    e.target.setAttribute('isBig', 'true');
                    e.target.setAttribute('oldWidth', e.target.offsetWidth);
                    e.target.setAttribute('oldHeight', e.target.offsetWidth);

                    var newImg = new Image();
                    newImg.onload = function() 
                      e.target.style.width = newImg.width+"px";
                      e.target.style.height = newImg.height+"px";
                    
                    newImg.src = e.target.getAttribute('src');
                
                else 
                    // make it small
                    e.target.setAttribute('isBig', 'false');
                    e.target.style.width = e.target.getAttribute('oldWidth')+"px";
                    e.target.style.height = e.target.getAttribute('oldHeight')+"px";
                
            
        
    
</script>

这会将图像的宽度和高度设置为原始尺寸。 如果要使其具有绝对定位的全屏效果，则需要创建一个新元素和 img 标签。您只需要将其 src 设置为图像的 src。然后您可以显示该图像。示例：

<!-- add this somewhere in body -->
<!-- container -->
<div id="bigImage" style="z-index: 4; position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden;">
    <!-- background. not necessary but usefull for close thing. -->
    <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); cursor: pointer;" onclick="closeImage()"></div>

    <!-- image element. object-fit: contain; for full window size -->
    <img src="<?php echo $row['image']; ?>"  id="bigImageChild" style="position: absolute; top: 5%; left: 5%; z-index: 6; width: 90%; height: 90%; object-fit: contain;">

    <!-- close button -->
    <span onclick="closeImage()" style="position: absolute; right: 20px; top: 20px; font-weight: 900; color: white; cursor: pointer;">X</span>
</div>


<!-- script for image -->
<script>
    function closeImage() 
        document.getElementById("bigImage").style.visibility = 'hidden';
    

    images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++)
        // on image click
        images[i].onclick = function(e)
            // set image src
            document.getElementById("bigImageChild").src = e.target.src;
            // show image
            document.getElementById("bigImage").style.visibility = 'visible';
        
    
</script>

【讨论】：

感谢您抽出宝贵时间与我合作，但您编写的代码无法正常工作。你想看看我正在开发的所有页面吗？

@LucasSantos 有一些错误。我刚刚更新了我的答案

【参考方案2】：

当我第一次点击时，我需要将图像设置为原始尺寸，第二次点击图像返回到 html 中定义的原始尺寸。

【讨论】：

那么第一部分就是您所需要的。但有更新。请稍等