如何使用 PHP 和 mysql 水平显示图像？

Question

我正在尝试从 mysql 中的数据库中获取图像，然后以 3 行等水平显示它们，我还希望将相关图像显示在我的图像顶部。 我不知道该怎么做。 这是我的主 div 中的代码。

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
               <?php do { ?>              

            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>

<?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>
</div>

这是我的php 查询，我认为它很好。

<?php
  require_once('includes/dbconn.php');
  $missions_sql = "SELECT missions_id, missions_name, missions_image FROM missions";
$missions_query = mysqli_query($dbconn, $missions_sql) or die(mysqli_error());
$rsMissions = mysqli_fetch_assoc($missions_query);

?>

这是我的相关 div 的 css

.row{
  width: 1360px;  
}

.container{
width: 1360px;    
}

.col-md-4 img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
          padding: 2px;
          position: relative;
}

.col-md-4 img:hover {
  -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
    -o-filter: blur(2px);
      -ms-filter: blur(2px);
          filter: blur(2px);    
}

.col-md-4 p{

    -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;
  visibility: hidden;
  position: absolute;

  top: 175px;
  left: 60px;
  text-decoration: none;
  font-size: 60px;
  opacity: 0;
  color: #fff;
  font-family: 'Raleway';   
}

.col-md-4:hover p{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -ms-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;    
}

Answer 1

您必须将循环放在 col-md-4 类之前。 否则 div 不会重复。 你不能水平地得到你的图像。试试下面的代码，它会适合你。

<div class="container" id="content">
<!-- Example row of columns -->
<div class="row">
  <?php do { ?>
    <div class="col-md-4">
        <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
        <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
        <p><?php echo $rsMissions['missions_name']; ?></p>
        </a>
    </div>
 <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>

Answer 2

我认为您将代码放在错误的位置。 如果有效，请尝试像下面的代码一样更改它。

<div class="container" id="content">
    <!-- Example row of columns -->
    <div class="row">
      <?php do { ?>
        <div class="col-md-4">
            <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>">
            <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" >
            <p><?php echo $rsMissions['missions_name']; ?></p>
            </a>
        </div>
     <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?>
</div>

Answer 3

 <?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'ledp'; //create connection $conn = new mysqli($servername,$username,$password,$dbname); //check connection if($conn->connect_error) { die ('Error: Failed to connect database'.$conn->connect_error); } if(isset($_POST['submit5'])) { $pro_image = $_FILES['pro_image']; $tmp = $_FILES['pro_image']['tmp_name']; $name = $_FILES['pro_image']['name']; move_uploaded_file($tmp,'upload/'.time().$name); if($name = '') { echo 'Image upload failed'; } else { echo 'Image uploaded'; } } $files = glob('upload/*.*'); //loop $i; for($i=0;$i<count($files);$i++){ $image = $files[$i]; echo basename($image); echo '<div class="container-fluid">'; echo '<div class="row">'; echo '<div class="col-3 d-flex">'; echo '<img class="img-fluid" src="'.$image.'" alt="" width = 300px>'.'<br><br>'; echo '</div>'; echo '</div>'; echo '</div>'; }; echo "<h2>Total images: $i </h2>"; $conn->close(); ?>