Scale panel down appropriately when viewing on smaller screen - html

Question

I have an application that is querying the Spotify API which returns some names and images.
I am listing all of these out on my page inside cards/panels like so:
<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>
The images returned can be of varying sizes and dimensions and so my bg-image class helps render these consistently on the page:
.bg-image {
background-size: cover;
display: block;
width: 100%;
height: 325px;
background-position: center;
}
This works perfectly on desktops:
However the cards/panels get stretched when viewing on smaller screens:
Is there a way I can prevent this from happening and just scale the image down to keep it consistent with what you see on the desktop and to keep the panel in roughly the same shape?
My CSS skills are really quite basic, and so I have no clue where to start when it comes to something like this.

Answer 1

can you try this
.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

Setting background-size: 100% was definitely a step in the right direction. The only issue was that it then meant the image repeated above and below to fill in the rest of the height set by the .bg-image class.
Setting background-repeat: no-repeat solved this, but still left the blank space above and below.
Using some jquery $('.bg-image').css('height', $('.bg-image').width()); I was able to resize the height of the <i> tag appropriately - the issue I ran in to was that because I am using Vue, the cards weren't visible in the DOM straight after my API request.
To allow v-for to render these and then run the jQuery, I simply added this into my Vue method:
this.$nextTick(function()
{
$('.bg-image').css('height', $('.bg-image').width());
});
This now resizes appropriately on desktop and mobile devices.