我如何使PHP / HTML图像显示原始大小onclick？

Question

I am developing a news section that contains text and images in which the images to be clicked have to show their original size. Can someone help me with this?

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

(Probably second part is more usefull for your use case)

If you want pure javascript, you can set a onclick event listener and get images real size ( Determine original size of image cross browser? ) and set this size to image. (if you want it to set to old sizes on second click, save old size to a global variable and get then set). Which will look like this:

I'm not good with pure javascript but i guess this is it.
Add this code somewhere in your file. It will run for every image

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

This will set images width and height to original sizes.

If you want to make it fullscreen with absolute positioning, you need to create a new element and img tag. And you just need to set its src to image's src. Then you can show that image. Example:

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

Answer 2

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