How do I set the height and width for images that use a responsive images style?
The code for this is actually pretty simple.
There are a few important points.

For this to work, all of the responsive images in a single responsive image style must have the same aspect ratio. They can have different heights and widths, but the aspect ratio must be the same.
You have to set the height and width to be the maximum possible (the height and width of the largest image in the responsive image style).

Assuming your responsive image style has a machine name of hero, here's some example code:
/**
 * Implements hook_preprocess_responsive_image() for MYMODULE.
 *
 * {@inheritDoc}
 */
function MYMODULE_preprocess_responsive_image(&amp;$variables) {
  $style_id = $variables['responsive_image_style_id'];
  if ($style_id === 'hero') {
    // Set the height + width to the aspect ratio for all images.
    // Use the largest possible height + width that may be displayed.
    $variables['img_element']['#attributes']['height'] = 450;
    $variables['img_element']['#attributes']['width'] = 800;
  }
}