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

Question

我将所有的 img 标签都切换为图片标签，这样我就可以添加 webp 图像和 png 图像以供依赖。 我还有一个媒体查询，它应该在手机上将图像缩小到 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>视为更多提供额外渲染“指令”的元元素。 实际渲染并最终采用 styles 的元素是<img>本身。 请注意，您使用媒体查询这一事实是无关紧要的，您总是希望将 styles 附加到<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>