Django如何在网格容器中限定显示指定数量的图片？

首先搞定你提到的两个核心需求：限制显示指定数量的图片，以及实现每行最多3列的卡片布局，下面分步骤给你说清楚：

一、限制显示的图片数量 #

有两种简单的实现方式，你可以根据场景选：

方式1：在视图层（views.py）中直接控制数量 #

直接给查询结果做切片，只返回你需要的数量，比如想显示前6张缩略图，就这么改：

def gallery(request):
    image = Product.objects.filter(file_type='image')
    # 只获取前6个thumbnail，数字按需修改即可
    thumbnail = Product.objects.filter(file_type='thumbnail')[:6]
    return render(request, 'products/fruits.html', {'img': image, 'thumb': thumbnail})

这种方式更高效，因为从数据库就只拿需要的数据，不用把所有结果都传到模板里。

方式2：在模板层（fruits.html）中控制循环次数 #

如果需要在模板里根据条件动态调整数量，可以用forloop.counter来判断：

{% for i in thumb %}
    {% if forloop.counter <= 6 %}  <!-- 只渲染前6个卡片 -->
        {% thumbnail i.image "150x150" crop="center" as im %}
        <!-- 你的卡片代码 -->
        {% endthumbnail %}
    {% endif %}
{% endfor %}

二、实现每行最多3列的卡片布局 #

你现在用的card-deck默认是均分宽度，要稳定实现每行3列，更推荐用下面两种方法：

方法1：用Bootstrap网格系统（推荐，适配你现有代码） #

把卡片放到col-md-4的容器里，这样在中等屏幕及以上自动每行3列，小屏幕会自动堆叠，响应式效果拉满：

<div class="grid-container">
    <div class="row">  <!-- 替换原来的card-deck -->
        {% for i in thumb %}
            {% if forloop.counter <= 6 %}  <!-- 可选：保留数量限制 -->
                {% thumbnail i.image "150x150" crop="center" as im %}
                <div class="col-md-4 mb-4">  <!-- 每行3列，mb-4增加底部间距 -->
                    <div class="card h-100">  <!-- h-100让同排卡片高度一致 -->
                        <!--Card image-->
                        <div class="view overlay">
                            <img src="{{ im.url }}" alt="Card image cap" class="card-img-top">
                            <a href="#!">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                        <!--Card content-->
                        <div class="card-body">
                            <h4 class="card-title">{{ i.name }}</h4>  <!-- 显示模型里的真实产品名称 -->
                            <p class="card-text">{{ i.description }}</p>  <!-- 显示真实描述 -->
                            <button type="button" class="btn btn-light-blue btn-md">Read more</button>
                        </div>
                    </div>
                </div>
                {% endthumbnail %}
            {% endif %}
        {% endfor %}
    </div>
</div>

方法2：用CSS Grid自定义布局 #

如果不想依赖Bootstrap网格，也可以给grid-container加自定义样式：

.grid-container .card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

auto-fill会根据容器宽度自动调整列数，minmax(300px,1fr)保证卡片最小宽度300px，空间足够时自动均分，也能实现每行3列的效果。

小优化建议 #

把卡片里的静态文本Card title和示例描述，改成模型里的{{ i.name }}和{{ i.description }}，这样显示的是你上传产品的真实信息，更实用~

内容的提问来源于stack exchange，提问作者marci