小さな画面で表示するときにパネルを適切にスケールダウンする

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

を試すことができますは間違いなく正しい方向への一歩でした。唯一の問題は、.bg-imageクラスで設定された高さの残りの部分を埋めるために上と下のイメージを繰り返すことを意味していました。

設定するとbackground-repeat: no-repeatはこれを解決しましたが、依然として上下の空白が残っています。

$('.bg-image').css('height', $('.bg-image').width());<i>タグの高さを適切に変更することができました。私は、Vueを使用しているため、Vueを使用しているため、APIリクエスト後にDOMにカードが表示されませんでした。

v-forはこれらをレンダリングして、jQueryのを実行できるようにするために、私は単に私のVueの方法にこれを追加しました：

this.$nextTick(function() 
{ 
    $('.bg-image').css('height', $('.bg-image').width()); 
}); 

これは、現在デスクトップとモバイルデバイス上で適切にサイズ変更します。

Answer 2

あなたがbackground-size: 100%の設定この

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