Reply To: Scale & Fit image on the mobile screen

[Beverleyh]

The image in the mobile example has much more actual landscape in frame than on the raw desktop/CodePen image – just look at the buildings in shot along the horizon in the background. You wouldn’t be able to manipulate the desktop image into showing extra landscape if it doesn’t already exist in the image, so are you therefore asking how to switch the image between desktop and mobile view (2 different images)?

Alternatively, if you just want to reduce the visible height of the CodePen image (faux cropping), while still retaining correct proportions (one image with 2 views rather than 2 different images), try removing the explicit height from .image--content .image and cap the width of .image--content with a max-width. It couldn’t ever look like the sample mobile image you provided though because there isn’t the landscape/horizon to “reveal” with CSS trickery.