Html 在较小屏幕上查看时，适当缩小面板比例_Html_Css_Vue.js

Html 在较小屏幕上查看时，适当缩小面板比例

html css vue.js

Html 在较小屏幕上查看时，适当缩小面板比例,html,css,vue.js,Html,Css,Vue.js,我有一个应用程序正在查询Spotify API，该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="na

我有一个应用程序正在查询Spotify API，该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>

这在台式机上非常有效：

但是，在较小的屏幕上查看时，卡/面板会拉长：

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

我的CSS技能非常基础，所以我不知道从哪里开始做类似的事情。

你能试试吗

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

你能试试这个吗

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

设置

背景大小：100%

无疑是朝着正确方向迈出的一步。唯一的问题是，它意味着图像在上面和下面重复，以填充

.bg image

类设置的其余高度

设置<代码>后台重复：没有重复< /代码>解决了这个问题，但是仍然保留了上面和下面的空白空间。

使用一些jquery

$（'.bg image'）.css（'height'，$（'.bg image'）.width（））

我能够适当地调整

标记的高度-我遇到的问题是，因为我使用的是Vue，在API请求之后，这些卡在DOM中就不可见了

要允许

v-for

渲染这些内容，然后运行jQuery，我只需将其添加到我的Vue方法中：

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

现在，它可以在桌面和移动设备上适当调整大小。

设置

背景大小：100%