[英]Why doesn't my @media query work with the picture tag?
I switched all my img tags to picture tags so I could add webp images along with png images to fall back on.我将所有的 img 标签都切换为图片标签,这样我就可以添加 webp 图像和 png 图像以供依赖。 I also have a media query that's supposed to shrink the images to 65x65 when on a phone but instead it leaves the images as 100x100.我还有一个媒体查询,它应该在手机上将图像缩小到 65x65,但它会将图像保留为 100x100。 How do I fix this?我该如何解决?
@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>
Style it on the <img>
tag.在<img>
标签上设置样式。 Think of <picture>
as more of a meta element that provides additional rendering "instructions".将<picture>
视为更多提供额外渲染“指令”的元元素。 The element that is actually rendered, and ultimately takes the styles, is the <img>
itself.实际渲染并最终采用 styles 的元素是<img>
本身。 Note that the fact that you are using a media query is irrelevant, you'll always want to attach your styles on the <img>
tag.请注意,您使用媒体查询这一事实是无关紧要的,您总是希望将 styles 附加到<img>
标记上。
Read more about <picture>
on MDN here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.