我有一个查询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技巧确实很基本的,所以我不知道在那里,当谈到这样的事情开始。
将背景大小更改为100%如何? –
@CarlEdwards显示整个图像,但在图像的上下重复它 - 我认为这是由于我设定的高度。 – James
@CarlEdwards http://imgur.com/a/Dlc5s – James