Free Republic
Browse · Search
News/Activism
Topics · Post Article

To: castlebrew

<img src="http://1.bp.blogspot.com/-uIC_BF3rkAs/TsfubU1kuBI/AAAAAAAAGGU/krcf8ivQE1I/s1600/Campfire+Toaster+2.jpg" width='25%'>

Gets you an image that is 25% of the width of the page. Percentages are preferred to pixels for specifying size because everybody has a different screen size.

197 posted on 06/22/2012 9:32:22 PM PDT by Mycroft Holmes (<= Mash name for HTML Xampp PHP C JavaScript primer. Programming for everyone.)
[ Post Reply | Private Reply | To 195 | View Replies ]


To: y'all
This is my new and improved image screed.

Chow for paragraph eater.

<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png"><p>
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="30%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="15%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="7%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="4%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="2%">
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="1%"> .
gets you:

.

J. R. "Bob" Dobbs receding into infinity...

<img src="http://mumble.com/image.jpg"> substitute the actual source of the image for http://mumble.com/image.jpg This image must be out on a server on the web someplace, not on your machine. This is why people have flickr and picassa accounts. You can easily find out the URL of an existing picture on the web by right-mousing over it and selecting Open Image In New Tab. This will open a tab on your browser containing only that image. The URL of that tab is the one to use as your src="" value.

Some of the photo storage sites on the web (flickr) try to drive web traffic to their site to harvest advertising by providing a convenient pointer to their site that isn't a URL to a .jpg To get the proper URL try right mousing over the image and select Open Image in New Tab. This should get you the naked image itself, without all of the surrounding advertising. This is the URL you want to use.

Size: You can easily vary the size of a given image by specifying it. The native size of the J. R. "Bob" Dobbs picture above is 324x216 pixels. Typical screen pixels per inch numbers for normal displays are in the range of 75 to 150 so the original Dobbs'Head will likely appear on your screen somewhere between 2.88 to 1.44 inches wide.

The next row of Dobbs'Heads are scaled to the width of the enclosing container. We use the width because its value is mostly apparent on the screen. The value of the container's height is less so. The first Dobbs'Head is scaled to 30% of the width of the container. The next at about half that, and so forth... This produces a line of attractive Dobbs'Heads receding into infinity that occupies about half the width of your page, all without needing to know how wide your page is. The size of the images will change if you grab the edge of the page and make it wider or thinner. This is the reason you want to scale images (and anything else, really) by percentages rather than pixels.

In the past it was best to keep your scaling to powers of 2 (as shown) to minimize scaling artifacts. Current smoothing algorithms and processor speeds make that pretty much unnecessary. Remember that scaling up will not introduce new detail into the existing picture.

218 posted on 06/23/2012 5:18:37 AM PDT by Mycroft Holmes (<= Mash name for HTML Xampp PHP C JavaScript primer. Programming for everyone.)
[ Post Reply | Private Reply | To 197 | View Replies ]

Free Republic
Browse · Search
News/Activism
Topics · Post Article


FreeRepublic, LLC, PO BOX 9771, FRESNO, CA 93794
FreeRepublic.com is powered by software copyright 2000-2008 John Robinson