Question

我有一个应用程序正在查询返回一些名称和图像的Spotify API。

我在卡片/面板中的所有页面上列出了所有这些内容，如下所示：

<div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks">
    <div class="card">
        <div class="header bg-red">
            <h2 class="nameHeading">
                @{{ track.name }} <small>@{{ track.artists[0].name }}</small>
            </h2>
            <p class="header-dropdown m-r--5">@{{ index + 1 }}</p>
        </div>
        <div class="body">
            <i :style="{ 'background-image': `url(${track.album.images[1].url})` }" :alt="track.name" class="bg-image"></i>
        </div>
    </div>
</div>

返回的图片可能有不同的尺寸和尺寸，因此我的bg-image类有助于在页面上一致地呈现这些图片：

.bg-image {
    background-size: cover;
    display: block;
    width: 100%;
    height: 325px;
    background-position: center;
}

这适用于台式机：

然而，在较小的屏幕上观看时卡/面板会拉长：

有没有办法可以防止这种情况发生，只需缩小图像以使其与您在桌面上看到的一致并保持面板大致相同的形状？

我的CSS技能非常基本，所以我不知道从哪里开始这样的事情。

Answer 1

你可以试试吗

.bg-image  {
    width:100%;
    float:left;
    background:url('http://media02.hongkiat.com/ww-flower-wallpapers/dandelion.jpg');
    height:600px;
    background-size:100% auto;
 }

Answer 2

设置background-size: 100%绝对是朝着正确方向迈出的一步。唯一的问题是，它意味着在上方和下方重复的图像填充.bg-image类设置的其余高度。

设置background-repeat: no-repeat解决了这个问题，但仍然留下了上方和下方的空白区域。

使用一些jquery $('.bg-image').css('height', $('.bg-image').width());我能够适当地调整<i>标签的高度 - 我遇到的问题是因为我使用的是Vue，所以卡片在我的API请求后直接使用DOM。

要允许v-for呈现这些并运行jQuery，我只需将其添加到我的Vue方法中：

this.$nextTick(function()
{
    $('.bg-image').css('height', $('.bg-image').width());
});

现在可以在桌面设备和移动设备上进行适当调整。

在较小的屏幕上查看时，适当缩小面板

2 个答案: