Scale & Fit image on the mobile screen

[Mary Pieroszkiewicz]

Hey. I have a problem with an image for mobile.

An image in full resolution is like this: http://www.marypieroszkiewicz.com/image__files/desktop__image.jpg and they are supposed to look like on the desktop

For mobile, an image has to look like this: http://www.marypieroszkiewicz.com/image__files/mobile__image.jpg in a container

On Codepen I managed to do something like this: https://codepen.io/mary_pieroszkiewicz/full/GzLpVK but this is not the effect of what is on the mobile project

Thank you for your help!
Mary

[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.

[Author]

Posts