LeonLatex Posted March 25, 2022 Share Posted March 25, 2022 (edited) How to make a raster image adapt/fit to all resolutions? For that matter, a vector image as well. I mean as in the examples below: http://www.loopnet.comwww.waldorfastoriabeverlyhills.comwww.thedubaimall.comhttp://www.fabricliving.cohttp://www.theagencyre.com So, is it enough to oversize the image (eg 6000 * X pix) and put it in a div box? I have tried this, but it did not work. And even that will create white spaces around the image eventually? It did with me, but it's limited to how much I can increase the resolution of my equipment as well, so it's limited. Therefore, I have not been able to increase the resolution to more than a little over 2000 on the screen and tried with images ranging from 1024 and up. If the image is smaller than the box, I get some disturbance in the image. The position changes and everything that is not supposed to happen happens. How to make one image scale and stay in the same place as scaling up and down? I do not require you to set up any script for me, or give me finished things. I'm just asking you to tell me how and what is used, how it's done. Feel free to point me to a tutorial or something as well. I have not found that either. I asume it's used CSS..? Edited March 25, 2022 by LeonLatex Quote Link to comment Share on other sites More sharing options...
kicken Posted March 25, 2022 Share Posted March 25, 2022 (edited) You might read through this MDN article on Responsive Images. You can use the srcset attribute to provide different images to display for different resolutions and the sizes attribute to determine which of the options to display for a given screen size. Have your CSS code then scale the images to the right size by setting their width to 100%. If you start with an image equal to or slightly larger than the screen size, then let the browser scale it down you shouldn't loose much in terms of image quality and still maintain a full 100% with image. Edited March 25, 2022 by kicken 1 Quote Link to comment Share on other sites More sharing options...
LeonLatex Posted March 25, 2022 Author Share Posted March 25, 2022 4 hours ago, kicken said: You might read through this MDN article on Responsive Images. You can use the srcset attribute to provide different images to display for different resolutions and the sizes attribute to determine which of the options to display for a given screen size. Have your CSS code then scale the images to the right size by setting their width to 100%. If you start with an image equal to or slightly larger than the screen size, then let the browser scale it down you shouldn't loose much in terms of image quality and still maintain a full 100% with image. Thanks kicken. I will try this later. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.