Question

我今天发现了<picture>标记，该标记允许<img>的多个图像来源。我在w3schools上跟随了this example

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

我实施了它：

<picture>
  <source media="(max-width:768px)" srcset="img/keyclubsmall.png">
  <source srcset="img/key.png">
  <a href = "/"><img src = "img/key.png"></a>
</picture>

问题：当我将屏幕宽度缩小到小于768px时，仍会使用key.png，忽略keyclubsmall.png，其中<picture>是async add({ commit }, space ) { return await axios.post('/spaces',space).then( response => { commit('ADD_SPACE',response.data); Promise.resolve(response.data); }, error => { Promise.reject(error); }); },应该切换到。我做错了什么，需要改变什么？

Answer 1

我解决了我的问题：<a>需要包装整个<picture>，因为<img>不再是图片的唯一组成部分。

<a href = "/">
  <picture>
    <source media="(max-width:768px)" srcset="img/keyclubsmall.png">
    <source srcset="img/key.png">
    <img src = "img/key.png">
  </picture>
</a>

<picture>标签不起作用

1 个答案: