Title: Enable Responsive Image Author: Aki Hamano Published: 2023 年 12 月 12 日 Last modified: 2026 年 3 月 3 日 --- 搜索插件 ![](https://ps.w.org/enable-responsive-image/assets/banner-772x250.png?rev=3008450) ![](https://ps.w.org/enable-responsive-image/assets/icon-256x256.png?rev=3008450) # Enable Responsive Image 作者：[Aki Hamano](https://profiles.wordpress.org/wildworks/) [下载](https://downloads.wordpress.org/plugin/enable-responsive-image.1.6.0.zip) [实时预览](https://cn.wordpress.org/plugins/enable-responsive-image/?preview=1) * [详情](https://cn.wordpress.org/plugins/enable-responsive-image/#description) * [评价](https://cn.wordpress.org/plugins/enable-responsive-image/#reviews) * [安装](https://cn.wordpress.org/plugins/enable-responsive-image/#installation) * [开发进展](https://cn.wordpress.org/plugins/enable-responsive-image/#developers) [支持](https://wordpress.org/support/plugin/enable-responsive-image/) ## 描述 Enable Responsive Image adds settings to the Image block to display different images depending on the width of the screen. You can add multiple images and set media queries and resolution for each image. If the screen width matches the conditions of that media query, it will switch to the corresponding image. ### Resources #### Image for screenshot * License: Public Domain * Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20 ## 屏幕截图 * [[ * Settings added to the block sidebar of the image block * [[ * How the image changes depending on the screen width ## 安装 1. Upload the `enable-responsive-image` folder to the `/wp-content/plugins/` directory. 2. Activate the plugin through the \’Plugins\’ menu in WordPress. ## 常见问题 ### How does this plugin work? This plugin rewrites the HTML markup for the image block rendered on the front end. Wrap the img element with a picture element, and add source elements with srcset and media attributes inside the picture element based on the settings of the added image. ### It does not work correctly when multiple image sources are set. Try rearranging the order of the images. For example, if both images have a Media Query Type of max-width, the one with the smaller value should be ordered on top. ### Even if I switch the screen width or device on the editor, it does not switch to the set image. On the editor side, images do not switch by default. Click the “Enable responsive image preview” button on the block toolbar. ### What filters can I use? You can find a list of the available filters in the [Github readme](https://github.com/t-hamano/enable-responsive-image#filters). ## 评价 ![](https://secure.gravatar.com/avatar/83fabe163ff5f3406b03ffa2337bc87c0ebc5c3c2cfcca2c36286a8ca9f3e4bb? s=60&d=retro&r=g) ### 󠀁[Great Plug-In. Should be added to Core](https://wordpress.org/support/topic/great-plug-in-should-be-added-to-core/)󠁿 [digberlin](https://profiles.wordpress.org/digberlin/) 2025 年 3 月 17 日 Must-have plug-in for responsive websites. ![](https://secure.gravatar.com/avatar/2892d0b180230dc82c8c8898e5b5d925837b0e51f80f8a5df52ed0d5150028b2? s=60&d=retro&r=g) ### 󠀁[Must install for website creation at work.](https://wordpress.org/support/topic/must-install-for-website-creation-at-work/)󠁿 [けい (Kei Nomura)](https://profiles.wordpress.org/mypacecreator/) 2025 年 3 月 12 日 This is exactly the plugin I wanted. Thank you. ![](https://secure.gravatar.com/avatar/a7276235fb250f091f56688568365e47d4536c5acc9b22873be5d89ded125a3e? s=60&d=retro&r=g) ### 󠀁[5 Stars](https://wordpress.org/support/topic/5-stars-594/)󠁿 [iz4atkal](https://profiles.wordpress.org/iz4atkal/) 2024 年 12 月 8 日 Very convenient! ![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80? s=60&d=retro&r=g) ### 󠀁[Very useful for professional site builds](https://wordpress.org/support/topic/very-useful-for-professional-site-builds/)󠁿 [onetrev](https://profiles.wordpress.org/onetrev/) 2024 年 7 月 26 日 Working well, just what was needed. Thanks for making this! While I understand this functionality not being the core image block, it’s essential for any kind of professional site build so thank you very much for making it! ![](https://secure.gravatar.com/avatar/62fe212021d456e5fdb54e3ee53bdd71b42a195b3e9ca74c7c0494cb96425d30? s=60&d=retro&r=g) ### 󠀁[The Plugin I Have Been Waiting For!!](https://wordpress.org/support/topic/the-plugin-i-have-been-waiting-for-2/)󠁿 [stevieboy23](https://profiles.wordpress.org/stevieboy23/) 2024 年 2 月 7 日 At last! I have waited a long time for this functionality to come to Gutenberg… As far as I know, this is the only plugin out there that will allow you to set different images for different screen sizes – all inside the block editor!! No more outside- the-editor workarounds needed to achieve this – Brilliant!!!By-the-way, this developer has created a whole “swiss army knife” range of additional plugins for Gutenberg: Flexible Spacer Block, Flexible Table Block and more. Well done, thank you, and keep up the great work, Very Best Wishes!!!! [ 阅读所有5条评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 贡献者及开发者 「Enable Responsive Image」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) 「Enable Responsive Image」插件已被翻译至 4 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image/contributors) 为本插件所做的贡献。 [帮助将「Enable Responsive Image」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/enable-responsive-image/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/enable-responsive-image/)，或通过 [RSS](https://plugins.trac.wordpress.org/log/enable-responsive-image/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/enable-responsive-image/)。 ## 更新日志 #### 1.6.0 * Tested to WordPress 7.0 * Drop support for WordPress 6.8 * Enhancement: Polish block sidebar * Accessibility: Improve source button aria-label #### 1.5.0 * Tested to WordPress 6.9 * Enhancement: Update block toolbar icon * Drop support for WordPress 6.6 and 6.7 * Drop support for PHP 7 #### 1.4.0 * Tested to WordPress 6.8 * Enhancement: Show full srcset url * Accessibility: Respect user preference for CSS transitions * Drop support for WordPress 6.5 #### 1.3.0 * Tested to WordPress 6.7 * Drop support for WordPress 6.4 #### 1.2.0 * Tested to WordPress 6.6 #### 1.1.1 * Remove unnecessary changelog #### 1.1.0 * Tested to WordPress 6.5 * Enhancement: Polish block sidebar #### 1.0.0 * Initial release ## 额外信息 * 版本 **1.6.0** * 最后更新：**3 月前** * 活跃安装数量 **1,000+** * WordPress 版本 ** 6.9 或更高版本 ** * 已测试的最高版本为 **7.0** * PHP 版本 ** 8.0 或更高版本 ** * 语言 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/enable-responsive-image/)、 [English (US)](https://wordpress.org/plugins/enable-responsive-image/) 、 [Japanese](https://ja.wordpress.org/plugins/enable-responsive-image/)、 [Spanish (Chile)](https://cl.wordpress.org/plugins/enable-responsive-image/) 和 [Spanish (Spain)](https://es.wordpress.org/plugins/enable-responsive-image/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) * 标签 * [block](https://cn.wordpress.org/plugins/tags/block/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/) [image](https://cn.wordpress.org/plugins/tags/image/)[responsive](https://cn.wordpress.org/plugins/tags/responsive/) * [高级视图](https://cn.wordpress.org/plugins/enable-responsive-image/advanced/) ## 评级 5 星（最高 5 星）。 * [ 5 条 5 星评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/enable-responsive-image/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 贡献者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) ## 支持 最近两个月解决的问题： 总计 1，已解决 0 [查看支持论坛](https://wordpress.org/support/plugin/enable-responsive-image/)