WordPress and responsive images

You have many options in the HTML markup to define responsivenes.
One would be to use srcset and sizes new markup.
You may also use picture markup tag if you need more control.

Your WordPress code may look like this:

$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
<img src="<?php echo esc_url( $img_src ); ?>"
         srcset="<?php echo esc_attr( $img_srcset ); ?>"
         sizes="(max-width: 50em) 87vw, 680px" alt="...">

The most important is to have the thumbnails that you create via cropping and scaling. Let’s check these scenarios.
For that you need add_image_size() WordPress function that takes thes pareameters:

 * @param string     $name   Image size identifier.
 * @param int        $width  Image width in pixels.
 * @param int        $height Image height in pixels.
 * @param bool|array $crop   Optional. Whether to crop images to specified width and height or resize.
 *                           An array can specify positioning of the crop area. Default false.
function add_image_size( $name, $width = 0, $height = 0, $crop = false ) {


add_image_size( 'cropped-box', 400, 300, true);
add_image_size( 'cropped-box-2', 800, 600, true);
add_image_size( 'cropped-box-3', 1200, 900, true);

By defining it this way we get (same aspect ratio) we get the material for srcset, else srcset would be empty.


add_image_size( 'scalled-box', 400, 9999, false);
add_image_size( 'scalled-box-2', 800, 9999, false);
add_image_size( 'scalled-box-3', 1200, 9999, false);

In fact it is possible to scale based on width

add_image_size( scalled-box', 9999, 400, false);
add_image_size( 'scalled-box-2', 9999, 800, false);
add_image_size( 'scalled-box-3', 9999, 1200, false);

Lastly it is possibel to scale this way:

add_image_size( 'scalled-fixed', 400, 400, false);

More control

For more control you need you may need set_post_thumbnail_size function:

set_post_thumbnail_size( 50, 50, array( 'center', 'center')  );

or if you like more from top left corner you can do it this way:

set_post_thumbnail_size( 50, 50, array( 'left', 'top')  );