Question

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

我的网页代码是：

<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。

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

我对该div的css通常是：

Stream

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

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

1 个答案: