The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scale & Fit image on the mobile screen

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #283315
    Mary Pieroszkiewicz

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

    An image in full resolution is like this: and they are supposed to look like on the desktop

    For mobile, an image has to look like this: in a container

    On Codepen I managed to do something like this: but this is not the effect of what is on the mobile project

    Thank you for your help!


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.