未应用图片标签

问题描述 投票:0回答:2

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

我看到了图片,但是如果我只是将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/[email protected]">
      <source type="image/webp" media="(min-width: 768px)" srcset="img/gratitude-image-tb.webp, img/[email protected]">
      <source type="image/webp" srcset="img/gratitude-image-mb.webp, img/[email protected]">
      <source media="(min-width: 1256px)" srcset="img/gratitude-image-desktop.png, img/[email protected]">
      <source media="(min-width: 768px)" srcset="img/gratitude-image-tb.png, img/[email protected]">
      <img class="gratitude__image" src="img/gratitude-image-mb.png" srcset="img/[email protected]" alt="Thanks">
    </picture>

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

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

html css
2个回答
0
投票

尝试从图像标签中取出srcset

<img class="gratitude__image" src="img/gratitude-image-mb.png" alt="Thanks">

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>
© www.soinside.com 2019 - 2024. All rights reserved.