Image Thumbnail Presentation Primer Tutorial

Image Thumbnail Presentation Primer Tutorial

Were you around when we presented Sim Card Primer Tutorial? It had this content up the top …

Sometimes with our dogs, Luna and Nala they do funny (or stupid) things that make me think of them as “Sinatra’s Dogs”. Why Sinatra? Well, it’s the name, sometimes, he used to refer to something as “stUpid” … and it runs in the family … he and Nancy (seem to remember) sang …

And then I go and spoil it all by saying something stUpid like “I love you”

? The way the image above, of the dogs, was/is presented …


<img src='https://www.rjmprogramming.com.au/Android/NalaLuna.jpg' title='Nala and Luna' style='width: 60px;'></img>


… like a thumbnail, with our nominal 60px (60 pixels) width, is of interest … if that’s what you are into? The image has been shrunk, but to ensure that it shrinks proportionally, we do NOT specify the height, and in this way, can rely on the good sense of every web browser type we know, that that web browser will keep the image in proportion, as it shrinks the image but takes note of your 60px (pixel) width assignment, honouring that you are in charge … as if?!

This can be done the other way around, as well, I (have not tested for sure, but) think by specifying a thumbnail height, but not specifying the thumbnail width.

The tutorial picture above shows a non-thumbnail view of this same image for your perusal. At this blog, we are in a rut with how we present this top part of a blog posting … for consistency … and today we show you the raw HTML that went into its WordPress blog posting CMS window (in HTML mode) below …


[caption id="" align="alignnone" width="220" caption="Image Thumbnail Presentation Primer Tutorial"]<a target=_blank href="https://www.rjmprogramming.com.au/Android/NalaLuna.jpg"><img style="border: 15px solid pink;" alt="Image Thumbnail Presentation Primer Tutorial" src="https://www.rjmprogramming.com.au/Android/NalaLuna.jpg" title="Image Thumbnail Presentation Primer Tutorial" style="float:left;" /></a>[/caption]


… where the bits between <img and /> (implied ></img>) go towards what makes up the image that you see of the dogs, Luna and Nala.

And so the lesson about the wisdom of web browsers concludes. And you take them for granted?!

If this was interesting you may be interested in this too.