连续显示各种未知尺寸的图像

Question

我正在构建一个小型网络应用程序，它通过Spotify API查询顶级曲目和艺术家，以返回这些内容并将其显示给用户。

我是显示每一个轨道或艺术家与引导面板，在标题中的轨道或艺术家的名称和相关的图像在身体。

对于轨道，这是很好的工作，因为在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的网格是如何工作的，当然您可以在应用程序中做一些更优雅的事情。

Answer 2

如果您需要在不知道尺寸的情况下为每个卡/面板视图保持图像大小的一致性，

问题是，如果你设置硬编码的高度或宽度，这将破坏图像拉伸。

解决这一问题的一个选择是为图像保留一个标签，以显示您首选的高度和宽度EX: 300 * 250。

    .thumbnail{
          width : 300px;
          height: 250px;
          background-image : url('path/image.jpg');
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
     }

然后添加类，如

Answer 3

默认情况下，您的服务器上有一个图像，可能是透明的git ( png)，或者是一些内容类似于“Loading.”的图像。(甚至是动画加载)。至于动态映像，当您从ajax调用中获得它们时，可以做两件事：

1. 将静态图像不透明度更改为零
2. 使用css中的动态图像url (让我们称之为"- image -src-")，如下所示： 面板-主体{背景-图像:url(-image)；背景大小:盖子；}