wordpress文章页面中的img套嵌导致图片不能自适应。 本文转载自  mochen91  查看原文  2014-03-23  10    div/ 手机网页/

时间：2021-10-18 08:36:20
在做移动自适应主题的时候发现文章页的图片怎么着都不能自适应，最后发现是因为wordpress的文章模型中，不但在<img
 src="">中添加了width和height,还在前面套了一个<div>，并且还追加了一个style，这样在移动端设置了img{max-width:100%;height:auto;}后，浏览器解析的时候就是按照这个<div>的最大宽度去解析的。
代码如下： 
<div class="context">

        <p>麻是日系每年春夏御用素材，凉爽度非常好</p>

<div style="width: 591px" class="wp-caption alignnone"><a href="http://www.109japan.net/wp-content/uploads/2014/03/b2a226982befb9a7553ddc627ab85032.jpg" class="fancybox" rel="box"><img alt="棉麻蝙蝠袖女装 白色中袖五分袖中长款宽松圆领t恤" src="http://www.109japan.net/wp-content/uploads/2014/03/b2a226982befb9a7553ddc627ab85032.jpg" width="581" height="631" /></a></div>

</div>

请教，有没有办法把这个<div>去掉呢？我找了半天没找到在哪个文件里。

1 个解决方案

#1

设置函数被包含在了 wp-includes/media.php 这个文件中，在其中找到以下代码（WordPress 4.0 中应该是867行）： 
$style = 'style="width: ' . (int) $caption_width . 'px" ';

上下文是： 
$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );


	$style = '';

	if ( $caption_width )

		$style = 'style="width: ' . (int) $caption_width . 'px" ';


	return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'

	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $atts['caption'] . '</p></div>';

删除这个即可 
width: ' . (int) $caption_width . 'px

#1

设置函数被包含在了 wp-includes/media.php 这个文件中，在其中找到以下代码（WordPress 4.0 中应该是867行）： 
$style = 'style="width: ' . (int) $caption_width . 'px" ';

上下文是： 
$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );


	$style = '';

	if ( $caption_width )

		$style = 'style="width: ' . (int) $caption_width . 'px" ';


	return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'

	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $atts['caption'] . '</p></div>';

删除这个即可 
width: ' . (int) $caption_width . 'px
标签：

相关文章