How to make a raster image adapt/fit to all resolutions

HTML & CSS
#1

How to make a raster image adapt to all resolutions? For that matter, a vector image as well. How do they do it? I mean as in the examples below:

www.loopnet.com

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 finish things. I’m just asking you to tell me how and what is used. Feel free to point me to a turorial as well. I have not found that either.

#2 
<div>
some sort of data
<img src='some image location' style='width: 300px;'>
</div>

It does not matter how big the image is, it will be locked into 300px (pixels) in this example.
If smaller than 300px, it will expand to fit 300, if larger, it will shrink to 300…
You can also use width: 30% to set it to 1/3 of the div… Just a start!

1 Like
#3

Hmmmm… is it that easy? So it will be locked to 300px no mather what screen resolution? I thought it was some advanced CSS.

#4

Well, you can set the size by pixels or by percentages as I said. If you have a box for the post and it is set to a certain size in pixels, then you would use pixels. If the box for the post is set by percentages, then you would use percentages. You showed us an image of a post, not any code. So I just explained both ways to handle this.

1 Like
#5

I didn’t show a code because i dont have any. The reason why i am asking is because i want to learn how the image(s) can automatic scale to fit the screen no matter what the screens resolutin is and no mather how big or smal the image is. That’s why i only showed you the links as a example what i mean. So i hoped i was lucky :smiley:

#6

Well, normally your post display would be set to a certain size. Like 300 pixels. Or it would be set to a percentage of the entire page, like 30%. And, the post would have div’s in it one for the image and one for the text. These were would set to a limit of a number of pixels or to a percentage of the area of the post.
And, the post is just a DIV with settings. Loosely like this:

<div style="width: 300px; border: gray 5px solid; padding: 10px;">
    <img src="some url to an image" style="width: 30%; float: left;>
    <div style="width:60%; float: right;">
         Some text pulled from wherever...
    </div>
</div>

This is just a base example. You can create something like this and it would be fine on most all resolutions. But, you might want to look into a platform like Bootstrap which had built in classes to handle a lot of this for you. Good luck!

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service