為什么我的@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>