làm cho chú thích hình ảnh Wordpress phản ứng nhanh

Trang web này chứa hình ảnh được chèn bởi Wordpress. Mã được sử dụng để chèn hình ảnh đầu tiên là:

[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]

Hình ảnh này được điều khiển bởi CSS:

#content .wp-caption a img {
    width: 614px;
    height: auto;
}

Tôi muốn làm cho hình ảnh này đáp ứng. Tôi đã chèn CSS:

@media (max-width:988px) {
    #content .wp-caption a img {
        width: 99.03225806%; /* 614/620 */
        height: auto;
    }
}

Tuy nhiên, chú thích DIV.wp vẫn ở mức 604px, như được chỉ định bên trong bài đăng Wordpress. Tôi đã cố gắng chỉ định tỷ lệ phần trăm này (97.41935483%) nhưng Wordpress diễn giải lại thành 104px.

CSS nội tuyến đang ghi đè CSS tôi chèn vào biểu định kiểu.

<div id="attachment_887" class="wp-caption alignnone" style="width: 614px">

Bất kỳ ý tưởng nào về cách tôi có thể làm cho .wp-caption đáp ứng?

Bạn sẽ muốn sử dụng:

@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;
  }
}

Một khả năng khác là thay đổi đầu ra shortcode để chiều rộng không còn được mã hóa cứng. Sửa đổi ví dụ Codex không có chiều rộng:

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

Đây là một giải pháp đơn giản và gọn gàng hơn nhiều:

function my_img_caption_shortcode_width($width, $atts, $content)
{
    return 0;
}

add_filter('img_caption_shortcode_width', 'my_img_caption_shortcode_width', 10, 3);