- This topic has 5 replies, 2 voices, and was last updated 5 years, 2 months ago by
.
-
Posts
-
Hi there,
Sorry if I posted this twice. I may have forgotten topic title last time.
I am trying to figure out how to handle feature images like this website: https://www.goodhousekeeping.com/holidays/gift-ideas/g35265796/best-baby-shower-giftsI really love the way the feature image is handled on desktop and mobile. It looks like, on mobile, 50% of the image is cropped and resized to fit perfectly on mobile. I really like this and it is a better mobile experience in my opinion.
If the image was just responsive and resized, the height would be lower (and not as nice looking).So, I wish to replicate this as much as possible. Original image size seems to be 2000x1000px (why so big initially?). On desktop: 980×490, on mobile 640px x 640px(ish). How can I do this?
I’m using Generatepress with wp show posts pro and Generateblocks hosted on Kinsta.
Thanks
KarlCustomer Support
Hi there,
That site is using some Javascript to ‘crop’ the image.
Can you share a link to your site so i can see if theres anything we can suggest ?Hi, sure, the site is a mess right now but here you go:
https://gavekongen.no/gave-12-aring/I testet my feature image design on mobile and quickly saw it was to much information in one image on a smaller screen.
That’s when I found that website and saw they used to pictures in one image to fill it out horizontally on desktop, and then cropped and resized to one picture on mobile so that the height would look good.
I think a height somewhere around 350-400px looks very nice on small screens.
I’m open to suggestions 🙂
So you can do something like this:
@media(max-width: 768px) { /* Stop image from overflowing container */ .featured-image.page-header-image-single { overflow: hidden; } /* Resize and position image */ .featured-image.page-header-image-single img { max-width: unset; width: 200vw; margin-left: -100vw; /* show right hand side of image */ } }The
width: 200vw;sets the image to 2x the viewport width. So only 50% of it will be visible.
Themargin-left: -100vw;is optional, without it you will see the left hand side of the image, with it you will see the right hand side of the image.This works if you want to see only 50% of the image. If you want to see a different percentage of the image then its simply mathematics.
For example:
width: 300vw; margin-left: -200vw;This will scale the image so only 1/3rd is visible and the -200vw will move it to display the right hand 3rd.
Hope that makes sense.
Thanks man! Worked perfectly 🙂
You’re welcome
- You must be logged in to reply to this topic.
