如何从动态 php bootstrap 图片库中删除白色 space？

Question

这是我目前看到的。黄色的叉是白色的space我要补

我想从 php/boostrap 图片库中删除白色 space。有一个简单的解决方案吗？我错过了什么吗？

<div class="row">
    <?php
    $sql = "SELECT * FROM image_uploads WHERE memberID = $memberid";
    $result = mysqli_query($databaseconnection, $sql);
    $images = array();

    while ($row = mysqli_fetch_array($result)) {
        $images[] = $row;
    }
    mysqli_close($databaseconnection);
    $y = 1;

    foreach ($images as $image) :
        if ($y > 0) {
            echo '<div class="col-sm-6 col-md-4 col-lg-3" style="padding: 5px;">
            <img class="img-fluid rounded shadow-lg" src="images/'. $image["image_url"] .'">
        </div>';

        }
    ?>
        
    <?php
    
        $y++;
    endforeach;
    ?>
</div>
</div>

Answer 1

如果您不上传相同尺寸的图片，您将始终看到黑色 space。

但总有解决办法。

如果您不想使用任何第三方 css 和 js，您可以在背景中使用图像来去除白色 space。

<style>
    .image-gallery{
        background-size: cover!important;
        background-position: center!important;
    }
</style>

<div class="row">
    <?php
    $sql = "SELECT * FROM image_uploads WHERE memberID = $memberid";
    $result = mysqli_query($databaseconnection, $sql);
    $images = array();

    while ($row = mysqli_fetch_array($result)) {
        $images[] = $row;
    }
    mysqli_close($databaseconnection);
    $y = 1;

    foreach ($images as $image) :
        if ($y > 0) {
            echo '<div class="col-sm-6 col-md-4 col-lg-3 image-gallery" style="padding: 5px;baclground: url(images/'. $image["image_url"] .')"></div>';

        }
    ?>
        
    <?php
    
        $y++;
    endforeach;
    ?>
</div>

或者你可以使用 Masonry Layout https://codepen.io/Harpreet-Singh-Dhot/pen/ZEpvBqr

如何从动态 php bootstrap 图片库中删除白色 space？

How to remove the white space from a dynamic php bootstrap image gallery?

html

css

php

whitespace