如何在引导网格中调整图像缩略图的大小？

Question

我有一个展示露营地的网站。但是，我想在主页上调整缩略图的大小，使它们的大小都相同，以使图像占据完全相同的尺寸。

Hoempage

我的页面代码是：

<div class="row text-center" style="display:flex; flex-wrap: wrap;">
        <% campsites.forEach(function(campsite){ %>
        <div class="col-md-3 col-sm-6">
            <div class="thumbnail">
                <img id="homegrid" src ="<%= campsite.image %>">
                <div class="caption">
                    <h4> <%= campsite.name%> </h4>
                    <h5><em><%= campsite.location %></em></h5>
                </div>
                <p>
                    <a href="/campsites/<%= campsite._id %>" class="btn btn-primary">More Info</a>
                </p>
            </div>
        </div>
        <% }); %>
    </div>

我尝试了以下方法，但它不起作用：

.thumbnail #homegrid
{
    width: 100%;
    height: auto;
    display: block;
}

Answer 1

为了最统一地做到这一点，我通常使用 css 的背景图像属性。而不是<img>，您使用<div> 样式background-image 设置如下：

background-image: url("/assets/s_thumb.png"); // can be set inline

我的那个 div 的 css 通常是：

width: 100%;
height: 165px;
background-size: 145% 145%;
background-repeat: no-repeat;
background-position: 50% 50%;

这使得 div 符合卡片的宽度，设置图像的高度，稍微缩放它（以考虑不同的纵横比），并将其居中。