This webpage 包含Wordpress插入的图像。用于插入第一幅图像的代码为：
[caption id="attachment_887" align="alignnone" width="604"]
<a href="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m.jpg">
<img class="size-large wp-image-887" alt="a Forest Legacy group" src="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m-1024x681.jpg" width="1024" height="681" />
</a> a Forest Legacy group[/caption]
此图像由CSS控制：
#content .wp-caption a img {
width: 614px;
height: auto;
}
我想让这张图片有响应性。我插入了CSS：
@media (max-width:988px) {
#content .wp-caption a img {
width: 99.03225806%; /* 614/620 */
height: auto;
}
}
然而，DIV.wp-caption仍然保持在604px，正如Wordpress帖子中所指定的那样。我尝试将其指定为百分比（97.41935483%），但Wordpress将其重新解释为104px。
The inline CSS is overriding the CSS I insert into the stylesheet.
<div id="attachment_887" class="wp-caption alignnone" style="width: 614px">
有没有关于如何制作的想法。wp字幕响应？
最合适的回答,由SO网友:David Kryzaniak 整理而成
您将要使用：
@media (max-width: 988px){
.wp-caption {
/* Force the box to be 100% */
width: 100% !important;
}
#content .wp-caption a img {
/* Scale down if too big */
max-width: 99.03225806%; /* 614/620 */
height: auto;
}
}
SO网友:helgatheviking
另一种可能性是更改短代码输出，以便宽度不再是硬编码的。将Codex示例修改为没有宽度：
add_filter(\'img_caption_shortcode\', \'my_img_caption_shortcode_filter\',10,3);
/**
* Filter to replace the [caption] shortcode text with HTML5 compliant code
*
* @return text HTML content describing embedded figure
**/
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
extract(shortcode_atts(array(
\'id\' => \'\',
\'align\' => \'\',
\'width\' => \'\',
\'caption\' => \'\'
), $attr));
if ( 1 > (int) $width || empty($caption) )
return $val;
$capid = \'\';
if ( $id ) {
$id = esc_attr($id);
$capid = \'id="figcaption_\'. $id . \'" \';
$id = \'id="\' . $id . \'" aria-labelledby="figcaption_\' . $id . \'" \';
}
return \'<figure \' . $id . \'class="wp-caption \' . esc_attr($align) . \'" >\'
. do_shortcode( $content ) . \'<figcaption \' . $capid
. \'class="wp-caption-text">\' . $caption . \'</figcaption></figure>\';
}
http://codex.wordpress.org/Function_Reference/add_filter#Example
