User Level: 

Image Styles actually provides a Scale and Crop style out of the box, but the default style doesn't provide many configuration options.

Creating a custom two-step scale and crop style will provide the ability to better control your critical dimensions, as well as provide anchoring to consistently crop images from a given side.

Click on an image to make it bigger.
D8 Configuration - Media - Image Styles - Navigation

1. Navigate to Image Styles

Go to Admin Menu > Configuration > Media > Image Styles.

D8 Configuration - Media - Image Styles - Default Image Styles

2. Default Image Styles Available

Drupal 8 comes with three default image styles: Large, Medium, and Small.

We're going to add a custom style to the list.

D8 Configuration - Media - Image Styles - Add Image Style

3. Add an Image Style

Click the Add Image Style button.

D8 Configuration - Media - Image Styles - Define Image Style

4. Name the Image Style

You'll be redirected to the Add Image Style screen.

Image Style Name text field = enter a name for your image style. Tip: determine and implement a naming convention for your image styles. It will save you a great deal of frustration in the long run.

Click the Create New Style button.

D8 Configuration - Media - Image Styles - Select Scale Effect

5. Select the Scale Effect

Select a New Effect select field = Scale.

Click the Add button.

D8 Configuration - Media - Image Styles - Set Width Dimensions

6. Set Width Dimension

Width text field = 1600.

We're performing a scale operation on this image therefore we only really need one dimension. Leave the Height field blank - it will adjust itself based on the width we've configured.

Allow Upscaling checkbox = leave blank. Checking this will allow a small image to be stretched to a size that is larger than the original image, which can result in poor image quality.

Click the Add Effect button.

 

D8 Configuration - Media - Image Styles - Select Crop Effect

7. Add a Crop Effect

Select a New Effect select field = Crop.

Click the Add button.

D8 Configuration - Media - Image Styles - Set Crop Dimension

8. Set Crop Dimensions

Width text field = 1800. (Note how this is the width that we scaled to in our previous setting. The Crop effect requires values in both fields.)

Height text field = 640.

Anchor radio buttons = select the side that the crop will take. For our purposes, choose the center radio button.

Click the Add Effect button.

D8 Configuration - Media - Image Styles - Click Update Style

9. Update the Style

Ensure that the Scale effect is at the top of the list. The order of processing starts at the top of this list.

Click the Update Style button.

D8 Configuration - Media - Image Styles - Image Style Confirmation Message

10. Completed Image Style Configuration

You will receive a system message at the top of the screen informing you that changes to the style have been saved.