图片标签未应用

时间:2019-10-30 20:03:29

标签: html css

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

我看到了图片,但是如果我只是将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协议的缘故,我无法添加图片,但我认为问题出在我的代码中-我检查了文件名,它们似乎都是正确的。

如果您知道如何解决此问题,请告诉我!

2 个答案:

答案 0 :(得分:0)

尝试将srcset从image标签中移除

n

答案 1 :(得分:0)

您可以使用此代码

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>