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
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