Tagged: image sizing
I created a full-width color section with an image to fill 75% of browser height. I uploaded the 4k image and designed it for 4k. the image appears great on my 4k monitor, but on my coworkers’ 720p monitors the image is zoomed way in. i understand the concept of why it is doing this, but is there a way to fix the scaling so the 4k images downsample into the 720 container rather than zooming way in?
link to screenshots of my same page on 2 different resolution displays: https://www.dropbox.com/sh/wr5yry1nh4cxe1y/AAAD6nTD3O5FjHHAq4b1tB4ya?dl=0
link to site that correctly displays the same image consistently across display resolutions: https://www.gmc.com/trucks/sierra/1500/sle-elevation-slt
Thanks!
Ryan
Hey ryanmeighan,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
Victoria
Hello! Here is the page in question:
Thanks,
Ryan
Hi,
Thank you for using Enfold.
The image in the color section is set as background via css, so it’s possible to apply a smaller version of the image for lower screen resolutions using css media query.
@media only screen and (max-width: 1600px) {
#av_section_1 {
background-image: url("https://yourdomain.com/wp-content/uploads/2019/08/Max-Header-Small.jpg") !important;
}
}
Adjust the image URL. You can also replace the selector “av_section_1” with the color section’s Section ID.
Best regards,
Ismael