Question

我正在尝试使用图片标签以使我的图片看起来不错，希望它们不会以丑陋的方式拉伸，但由于某种原因，它并未被应用。我在做什么错了？

我看到了图片，但是如果我只是将imgs添加到html文件中，效果将会相同。

.gratitude__image {
  height: 316px;
  width: 100%;

  @include tablet-small {
    height: 237px;
  }

  @include mobile {
    height: 176px;
  }
}

  <picture class="gratitude__pic">
      <source type="image/webp" media="(min-width: 1256px)" srcset="img/gratitude-image-desktop.webp, img/gratitude-image-desktop@2x.webp">
      <source type="image/webp" media="(min-width: 768px)" srcset="img/gratitude-image-tb.webp, img/gratitude-image-tb@2x.webp">
      <source type="image/webp" srcset="img/gratitude-image-mb.webp, img/gratitude-image-mb@2x.webp">
      <source media="(min-width: 1256px)" srcset="img/gratitude-image-desktop.png, img/gratitude-image-desktop@2x.png">
      <source media="(min-width: 768px)" srcset="img/gratitude-image-tb.png, img/gratitude-image-tb@2x.png">
      <img class="gratitude__image" src="img/gratitude-image-mb.png" srcset="img/gratitude-image-mb@2x.png" alt="Thanks">
    </picture>

不幸的是，由于NDA协议的缘故，我无法添加图片，但我认为问题出在我的代码中-我检查了文件名，它们似乎都是正确的。

如果您知道如何解决此问题，请告诉我！

Answer 1

尝试将srcset从image标签中移除

Answer 2

您可以使用此代码

body {
  padding: 0;
  margin: 0;
}

figure {
  margin: 0 auto;
}

<figure>
  <figcaption><code>sizes="320px"</code></figcaption>
  <img srcset="https://placehold.it/320 320w" sizes="320px">
</figure>
<hr>
<figure>
  <figcaption><code>sizes="100px"</code></figcaption>
  <img srcset="https://placehold.it/320 320w" sizes="100px">
</figure>
<hr>
<figure>
  <figcaption><code>sizes="20vw"</code></figcaption>
  <img srcset="https://placehold.it/320 320w" sizes="20vw">
</figure>
<hr>
<figure>
  <figcaption>No <code>sizes</code> attribute (browsers will assume <code>sizes="100vw"</code></figcaption>
  <img srcset="https://placehold.it/320 320w">
</figure>

图片标签未应用

2 个答案: