Archived topic
Section image sizing
4 replies · Started by Paul on March 4, 2018
I'm using a section purely for an image that's the same width as the content below it (text paragraphs), which is fine but when it resizes on mobile the height is reduced to much. The image is 1020 * 250 which automatically to 260 * 63 on a 320px screen width.
Is there a method I can use so the image has greater height on smaller screens? I've tried using a custom image size with an image css class, disabling the built scrset rezising, and a couple of responsive image plugins to no effect.
I noticed featured images also have little height on smaller screens but I've since stopped using them now I've setup page headers.
Any advice would be appreciated.
Thanks,
Paul.
Hi Paul,
Static images are scaled up/down by ratio so if we restrict the either the height or width, the image would lose its ratio.
What about having two images and use these classes to show one or the other?
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Ok thanks, I'll have a look. I imagine the option you've suggested would work but it's not something a client would be able to do without my help. I might have to accept images in body content isn't an option.
If you want the height to stay unchanged then using background image might be an option? But of course background image aren't responsive by nature so it will be cropped.
The original suggestion looks good to me. Would be nice for consistency if I could make these seperate images the same height on all screen sizes as those Show Posts displays - featured images.
