<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>响应式 &#8211; 李辉 / Grey Li</title>
	<atom:link href="https://greyli.com/tag/%E5%93%8D%E5%BA%94%E5%BC%8F/feed/" rel="self" type="application/rss+xml" />
	<link>https://greyli.com</link>
	<description>一个编程和写作爱好者的在线记事本</description>
	<lastBuildDate>Sat, 06 Dec 2025 03:28:58 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>

<image>
	<url>https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg</url>
	<title>响应式 &#8211; 李辉 / Grey Li</title>
	<link>https://greyli.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>让 CKEditor 图片响应式（responsive）</title>
		<link>https://greyli.com/ckeditor-image-responsive/</link>
		<comments>https://greyli.com/ckeditor-image-responsive/#respond</comments>
		<pubDate>Wed, 12 Dec 2018 09:10:39 +0000</pubDate>
		<dc:creator><![CDATA[李辉]]></dc:creator>
				<category><![CDATA[计算机与编程]]></category>
		<category><![CDATA[CKEditor]]></category>
		<category><![CDATA[响应式]]></category>
		<category><![CDATA[图片]]></category>

		<guid isPermaLink="false">http://greyli.com/?p=2027</guid>
		<description><![CDATA[通过 CKEditor 上传并插入图片后，CKEditor 的图片部件（widget）会在图片的 &#60;im [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>
	通过 CKEditor 上传并插入图片后，CKEditor 的图片部件（widget）会在图片的 &lt;img&gt; 元素里插入行内样式定义来设置图片的宽高，这会导致响应式布局失效：图片因为被固定了宽高，在窗口缩小后会超出外层元素。生成的 HTML 代码示例如下：
</p>
<pre>
&lt;img alt=&quot;hello&quot; src=&quot;/images/hello.jpg&quot; <strong>style=&quot;height:300px; width:500px&quot;</strong> /&gt;</pre>
<p>
	对于这个问题，有三种解决方法：
</p>
<h2>
	方法 1：设置 CSS<br />
</h2>
<p>
	最简单的解决方法是在 CSS 文件里加入下面的代码：
</p>
<pre>
img {
    max-width: 100%;
    height: auto !important;
}</pre>
<p>
	这会重写 CKEditor 生成的行内 CSS。
</p>
<h2>
	方法 2：使用插件&nbsp;Enhanced Image<br />
</h2>
<p>
	你可以使用加强版的图片部件插件&nbsp;<a href="https://ckeditor.com/cke4/addon/image2">Enhanced Image</a>（Image2）来替代原有的图片部件，同时确保 CKEditor 的版本大于 4.3。
</p>
<p>
	（未测试。）
</p>
<h2>
	方法 3：使用 JavaScript<br />
</h2>
<p>
	如果你使用 Bootstrap，这里还有另一种方法：
</p>
<pre>
CKEDITOR.on(&#39;instanceReady&#39;, function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules( {
        elements : {
            img: function( el ) {
                // Add bootstrap &quot;img-responsive&quot; class to each inserted image
                el.addClass(&#39;img-responsive&#39;);
        
                // Remove inline &quot;height&quot; and &quot;width&quot; styles and
                // replace them with their attribute counterparts.
                // This ensures that the &#39;img-responsive&#39; class works
                var style = el.attributes.style;
        
                if (style) {
                    // Get the width from the style.
                    var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                        width = match &amp;&amp; match[1];
        
                    // Get the height from the style.
                    match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                    var height = match &amp;&amp; match[1];
        
                    // Replace the width
                    if (width) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, &#39;&#39;);
                        el.attributes.width = width;
                    }
        
                    // Replace the height
                    if (height) {
                        el.attributes.style = el.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, &#39;&#39;);
                        el.attributes.height = height;
                    }
                }
        
                // Remove the style tag if it is empty
                if (!el.attributes.style)
                    delete el.attributes.style;
            }
        }
    });
});</pre>
<p>
	（<a href="https://gist.github.com/fabiomaggio/c2f4b84756cb4d82c0ae">出处地址</a>）
</p>
<p>
	需要注意的是，如果你使用 Bootstrap 4，需要把第 6 行的 img-responsive 换成 img-fluid。
</p>
<p>
	（未测试。）</p>
]]></content:encoded>
			<wfw:commentRss>https://greyli.com/ckeditor-image-responsive/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
