为什么我的@media 查询不适用于图片标签？

Question

我将我所有的 img 标签切换为图片标签，这样我就可以添加 webp 图像和 png 图像作为后备。我还有一个媒体查询，它应该在 phone 上将图像缩小到 65x65，但它却将图像保留为 100x100。我该如何解决这个问题？

@media only screen and (max-width: 600px) {
  .charactertable picture {
    width: 65px;
    height: 65px;
  }
}

<table id="myTable2" class="charactertable">
  <tr>
    <th class="tablename" onclick="sortTable(0)">Name</th>
    <th class="tableimageheader">Image</th>
    <th class="tablepersonality" onclick="sortTable(2)">Personality</th>
    <th class="tablespecies" onclick="sortTable(3)">Species</th>
    <th class="tablebirthday" onclick="sortTable(4)">Birthday</th>
    <th class="tablecatchphrase">Catchphrase</th>
  </tr>

  <tr>
    <td class="begintable">Admiral</td>
    <td>
      <picture>
        <source type="image/webp" srcset="Character_images/Admiral.webp">
        <img alt="Admiral" src="images/Admiral.jpg">
      </picture>
    </td>
    <td>Cranky</td>
    <td>Bird</td>
    <td><span class="date">0127</span>January 27th</td>
    <td class="endtable">"aye aye"</td>
  </tr>

Answer 1

在 <img> 标签上设置样式。将 <picture> 视为提供额外渲染“指令”的更多元元素。实际呈现并最终采用样式的元素是 <img> 本身。请注意，您使用媒体查询这一事实是无关紧要的，您总是希望将您的样式附加到 <img> 标签上。

在 MDN 上阅读有关 <picture> 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

@media only screen and (max-width: 600px) {
  .charactertable img {
    width: 65px;
    height: 65px;
  }
}

<table id="myTable2" class="charactertable">
  <tr>
    <th class="tablename" onclick="sortTable(0)">Name</th>
    <th class="tableimageheader">Image</th>
    <th class="tablepersonality" onclick="sortTable(2)">Personality</th>
    <th class="tablespecies" onclick="sortTable(3)">Species</th>
    <th class="tablebirthday" onclick="sortTable(4)">Birthday</th>
    <th class="tablecatchphrase">Catchphrase</th>
  </tr>

  <tr>
    <td class="begintable">Admiral</td>
    <td>
      <picture>
        <source type="image/webp" srcset="https://via.placeholder.com/120x120.webp">
        <img alt="Admiral" src="https://via.placeholder.com/120x120">
      </picture>
    </td>
    <td>Cranky</td>
    <td>Bird</td>
    <td><span class="date">0127</span>January 27th</td>
    <td class="endtable">"aye aye"</td>
  </tr>
</table>

为什么我的@media 查询不适用于图片标签？

Why doesn't my @media query work with the picture tag?

html

css

media-queries