image.scss

$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%;
  }
}

tinymce.php

<?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 );