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

Question

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

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