Archived topic
Responsive images
4 replies · Started by nick on July 18, 2022
I am trying make the home page image on my site responsive. In other words, all parts of the image are visible whichever device is viewing the site. I can't find a solution in the GP forum. I am trying to implement this solution - https://www.webdesignerdepot.com/2015/06/how-to-make-wordpress-images-responsive/
However, I can't see where to make the change to functions.php that are required.
Please can you advise or suggest another fix.
thanks
Hi there,
can you share a link to the site where i can see the issue ?
https://asassociatesltd.co.uk/
i've had to use a small image that fits mobile (almost) but obviously the image quality is lost on desktop
I assume we're looking at the team image at the top.
If so, its added as background image, which means the Container Block its attached to needs to maintain the same aspect ratio as the original image.
Thankfully its a. Full width and b. there is no HTML content inside the container so this should work
1. Calculate aspect ratio of the image ie. Height / Width * 100.
For that image its: 320 / 500 * 100 = 64%.
2. Select the container block, and in Spacing -> Minimum height add: 64 and set the units to vw
Presumably you may not want that on say Desktop or Tablet. So you can set a different height for Desktop, tablet and Mobile.
awesome. that worked, thanks
