时间戳

首页 > 解决方案 > 图片标签未应用

html - 图片标签未应用

问题描述

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

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

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

标签： htmlcss

解决方案

您可以使用此代码

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>

推荐阅读