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

Question

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

    <?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
}
?>

Answer 1

(可能第二部分对您的用例更有用)

如果你想要纯 javascript，你可以设置一个 onclick 事件监听器并获取图像实际大小(Determine original size of image cross browser?)并将此大小设置为图像。 (如果您希望它在第二次单击时设置为旧尺寸，请将旧尺寸保存到全局变量中，然后进行设置)。看起来像这样:

我不擅长纯 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']; ?>" alt="bigImage" 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>