Question

以下代码用于从数据库中检索图像并显示在表格中！在导入jquery和bootstrap文件（用于实现灯箱模型以查看图像）之后，图像的大小变小但我不知道如何增加图像的大小，因为它们有点小！我怎么能纠正它？

尺寸高度= 180和宽度= 150放置图像不起作用：（

<?php
    require("includes/db.php");

    $sql="SELECT * FROM `order` ";
    $result=mysqli_query($db,$sql);
    echo"<head>";
    echo'//<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
            <link rel="stylesheet" href="css/jquery.gallery.css">

            <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
            <script type="text/javascript"  src="js/jquery.gallery.js" ></script>
            <script>
                $(function() {
                    $(".simple_img_gallery").createSimpleImgGallery();
                });
            </script>';
    echo"</head>";

    echo "<body bgcolor=#E6E6FA>";
    echo "<table border=1 cellspacing=0 cellpadding=4 > " ;
    while($row=mysqli_fetch_array($result))
    {
        echo '<div class="simple_img_gallery">';
        echo '<a href='.( $row['Image1'] ).'    >';
        echo "<img id='myImg1' src='" .$row['Image1']. "' height='180' width='150' class='lightbox' />";

        echo "</a>";
        echo"</div>";

        echo "<br>";
        echo"</td>";
        echo"<td align=center >";


        if($row['Image2']=="No copy"){
            echo "No copy";
        }else{
            echo '<div class="simple_img_gallery">';
            echo '<a href='.( $row['Image2'] ).'>';
            echo "<img id='myImg1' src='" .$row['Image2']. "' height='180' width='150' class='lightbox' />";

            echo "</a>";
        }

        echo "<br>";
        echo"</td>";
        echo"<td align=center >";

        if($row['Image3']=="No copy"){
            echo "No copy";
        }else{
            echo '<div class="simple_img_gallery">';
            echo '<a href='.( $row['Image3'] ).'    >';

            echo "<img id='myImg1' src='" .$row['Image3']. "' height='180' width='150' class='lightbox' />";

            echo "</a>";
        }

        echo "<br>";
        echo"</tr>";
        echo "</div>";
    }
    echo"</body>";
    echo "<script type='text/javascript'>

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


</script>"

?>

Answer 1

看起来您正在通过CSS限制图像大小。也就是说，您的浏览器知道大约180x150大小，但根据您的CSS规则重新呈现它。

快速解决方法是：

echo "<img id='myImg1' src='" .$row['Image1']. "' height='180' width='150' class='lightbox' style="height: 180px; width: 150px;" />";

无论如何，请看看你的CSS并在那里修复它。

增加图像缩略图的大小

1 个答案: