javascript - 一致地显示各种未知维度的图像

Question

我正在构建一个小型网络应用程序，它通过 Spotify API 查询热门轨道和艺术家，以将这些返回并显示给用户。

我正在使用 Bootstrap 面板显示每个轨道或艺术家，标题中的轨道或艺术家的名称以及正文中的相关图像。

对于轨道，这非常有效，因为 API 响应中返回的图像似乎都具有相同的尺寸。

不过，对于艺术家来说，似乎返回的图像在可能的尺寸方面各不相同，这与轨道不同。

我试图通过仅使用图像数组中返回的图像之一并将图像的 height 和 width 设置为 100% 来解决这个问题 - 然而这不适用于所有图片，如果它们不是正方形或图片分辨率低并且被样式放大。

这是我的面板代码:

<div class="col-md-4" v-if="type == 'artists'" v-for="track in tracks">
    <div class="panel panel-default">
      <div class="panel-heading">@{{ track.name }}</div>
      <div class="panel-body"><img :src="track.images[0].url" :alt="track.name" class="img-responsive center-block" style="height: 100%; width: 100%"/></div>
    </div>
</div>

下面是一些可以在 image 数组中返回的示例:

"images":[  
   {  
      "height":640,
      "url":"https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964",
      "width":640
   },
   {  
      "height":320,
      "url":"https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198",
      "width":320
   },
   {  
      "height":160,
      "url":"https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7",
      "width":160
   }
]

"images":[  
   {  
      "height":640,
      "url":"https://i.scdn.co/image/6a299fe9d66f3036bb0b22a458d38f662655b559",
      "width":640
   },
   {  
      "height":300,
      "url":"https://i.scdn.co/image/c9b1fe49b9139cc42090a8b045678ae9a323c400",
      "width":300
   },
   {  
      "height":64,
      "url":"https://i.scdn.co/image/476d0a6971a8e46a411dc2a5382b20176e0c1a23",
      "width":64
   }
]

"images":[  
   {  
      "height":666,
      "url":"https://i.scdn.co/image/dd1ea0b4e68b25e2a82de61b03ee3933be266475",
      "width":1000
   },
   {  
      "height":426,
      "url":"https://i.scdn.co/image/b013b96bbe25ba13619f3d18f29f8dc999cdea7f",
      "width":640
   },
   {  
      "height":133,
      "url":"https://i.scdn.co/image/67636ab4283dc8783b60dd0ada9ade16300e3417",
      "width":200
   },
   {  
      "height":43,
      "url":"https://i.scdn.co/image/971cc938303fbebd8908ebfc30a9f759679efb14",
      "width":64
   }
]

我在我的应用程序中使用 Vue.js 来查询 API。

当我不知道将返回的分辨率时，我将如何正确且一致地渲染图像？是否有一些 CSS 魔术或 JavaScript 可以帮助做到这一点？

Answer 1

我会结合使用 Vue 和 CSS。 CSS 将使用 background-size: cover 将图像应用为背景，vue 将在您的模板中动态设置 background-image，即

new Vue({
    el: '#app',
    data: {
        "images": [{
        	"name": 'foo',
            "height": 640,
            "url": "https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964",
            "width": 640
        }, {
        	"name": 'bar',
            "height": 320,
            "url": "https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198",
            "width": 320
        }, {
        	"name": 'baz',
            "height": 160,
            "url": "https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7",
            "width": 160
        }]
    },
})

.bg-image {
    background-size: cover;
    display: block;
    width: 100%;
    height: 200px;
    background-position: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div class="container">
        <div :class="{
                'col-xs-4': image.width <= 200,
                'col-xs-6': image.width > 200 && image.width <= 400,
                'col-xs-12': image.width > 400,
            }" v-for="image in images">
            <div class="panel panel-default">
                <div class="panel-heading">{{ image.name }}</div>
                <div class="panel-body">
                   <i :style="{ 'background-image': `url(${image.url})` }" class="bg-image"></i>
                </div>
            </div>
        </div>
    </div>
</div>

然后您可以根据 API 返回的宽度或高度更改动态应用的类。我已经展示了它如何与 Bootstrap 的网格一起工作，确保您可以在您的应用程序中做一些更优雅的事情。