一致地显示各种未知尺寸的图像

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 的网格一起使用，确保您可以在您的应用程序中做一些更优雅的事情。

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 的），或者一些带有“正在加载...”之类的内容的图像（甚至是加载的动画 gif）。 至于动态图像，当您从 ajax 调用中获取它们时，请做两件事：

1. 将静态图像不透明度更改为零

2. 在css中使用动态图片url（我们称之为“-image-src-”） 像这样：

   .panel-body{ 背景图像：url（-image-src-）； 背景尺寸：封面； }