Break Wide Images

This lets the image expand beyond the content area. In the example below, the content area is 800px wide and my “wide” image size is 960px. On screens larger than 960px, it adds -80px left/right margin to the image ( (960px – 800px) / 2). On screens between 960px and 800px, it adds enough negative left/right margin to keep it full width. And at 800px and lower, it’s simply 100% wide.

The two variables at the top let you change the image size and the content area width. The tinymce.php file strips the hardcoded width from captions and adds a “break-wide” class so you can target images with captions.

$break_wide_image_width: 960px;
$break_wide_content_width: 800px;

.wp-caption.break-wide,
img.size-wide {
  @media (min-width: $break_wide_image_width) {
    margin: 0 #{( $break_wide_image_width - $break_wide_content_width ) / -2} 24px;
    width: $break_wide_image_width;
    max-width: $break_wide_image_width;
  }
  @media (max-width: $break_wide_image_width) and (min-width: $break_wide_content_width ) {
    float: none;
    margin: 0 0 24px;
    margin-left: calc(-50vw + #{$break_wide_content_width / 2 });
    width: 100vw;
    max-width: 200%;
  }
  .wp-caption-text {
    padding: 0 10px;
    max-width: 100%;
  }
  img.size-wide {
    margin: 0;
    width: 100%;
  }
}

<?php

/**
  * Remove width from wide images
  *
  */
function be_remove_wide_image_width( $output, $attr, $content ) {

  extract(shortcode_atts(array(
    'id'	=> '',
    'align'	=> 'alignnone',
    'width'	=> '',
    'caption' => ''
  ), $attr, 'caption'));

  if( empty( $caption ) )
    return $output;

  $class = 'wp-caption ' . esc_attr( $align );
  $style = '';
  if ( $id )
    $id = 'id="' . esc_attr($id) . '" ';
  if( $width )
    $style = ' style="max-width: ' . $width . 'px;"';
 	if ( 960 == (int) $width ) {
    $style = '';
    $class .= ' break-wide';
   }
   $content = str_replace( 'size-single_wide', '', $content );
   return '<div ' . $id . 'class="' . $class . '"' . $style . '>' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
 add_filter( 'img_caption_shortcode', 'be_remove_wide_image_width', 10, 3 );