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?）并将此大小设置为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']; ?>" 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中定义的原始尺寸。

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

2 个答案: