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，即

＆＃13;

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
        }]
    },
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

然后，您可以根据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），或者某些图像的内容类似于＆＃34; Loading ...＆＃34; （甚至加载GIF动画）。至于动态图像，当你从ajax调用中获取它们时，请做两件事：

将静态图像不透明度更改为零
在css中使用动态图片网址（让我们称之为＆＃34; -image-src - ＆＃34;）像这样：

.panel体{ 背景图像：网址（-image-SRC-）; 背景尺寸：盖; }

有意识地显示各种未知尺寸的图像

3 个答案: