在較小屏幕上查看時適當縮小面板

我有一個查詢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技巧確實很基本的，所以我不知道在那裏，當談到這樣的事情開始。

來源

2016-12-07 James

將背景大小更改爲100％如何？ –

@CarlEdwards顯示整個圖像，但在圖像的上下重複它 - 我認爲這是由於我設定的高度。 – James

@CarlEdwards http://imgur.com/a/Dlc5s – James

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

這就是現在適當地調整大小在桌面和移動設備。

來源

2016-12-07 05:42:58 James

你可以試試這個

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

來源

2016-12-07 04:26:09

我應該在哪裏應用'.main_box'類？這僅僅是我的'bg-image'類嗎？ – James

對不起，我只是想看一個演示，這就是爲什麼 –

你檢查與background_size：100％自動; –

在較小屏幕上查看時適當縮小面板

回答

相關問題