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

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

设置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()); 
}); 

这就是现在适当地调整大小在桌面和移动设备。

Answer 2

你可以试试这个

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