[Vuejs]-Scale panel down appropriately when viewing on smaller screen

by

0👍

✅

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.

👤James

0👍

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;
 }
👤Jishnu V S

Leave a comment