WordPress 4.4发布后,它增加了使用picturefill JavaScript库使功能图像响应的功能。还有其他人对<picture>
标签有时有效,有时无效。
我用于响应功能图像的代码:
<picture>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg"></a>
<!-- fallback -->
<a href="<?php the_permalink(); ?>"><img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text"></a>
</picture>
当我复制一个css技巧示例代码时。com,这起作用:
<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(min-width: 1000px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(min-width: 800px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg">
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg" alt="alt text">
</picture>
然后,我将媒体元素替换为第一个示例中的元素。当我添加另一篇文章或更改功能图片时,有没有什么想法是什么导致这一点起作用,然后不起作用?
谢谢
最合适的回答,由SO网友:Gregory Schultz 整理而成
通过移除<a href>
从图像中。这是通过链接制作响应图像的正确方法:
<a href="<?php the_permalink(); ?>">
<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg">
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text">
</picture>
</a>