How to handle big images from other Websites
Posted: 07 July 2015 06:43 AM   [ Ignore ]
Sr. Member
Avatar
RankRankRankRankRankRankRankRankRankRank
Total Posts:  5248
Joined  2007-08-31

So you can bind a remote image into a posting:

forum_logo2.jpg

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg[/img] 

You can make it smaller with width=“100px” (i.e. the width becomes 100 pixels):

forum_logo2.jpg width=100px

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg width="100px" [/img] 

Or as percentage of the width of the browser window (so the bitmap resize when you change the size of your browser window. Try it out!) with width=“30%”:

forum_logo2.jpg width=30%

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg width="30%" [/img] 

Add a border with style=“border:yellow inset 10px;”:

(Always everything on one line, no line feed or carriage return!)

forum_logo2.jpg style=border:yellow inset 10px;

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg 
style="border:yellow inset 10px;"[/img] 

Give the border a padding with style=“border:yellow inset 10px; background:lightblue; padding:5px;”:

forum_logo2.jpg style=border:yellow inset 10px; background:lightblue; padding:5px;

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg 
style="border:yellow inset 10px; background:lightblue; padding:5px;"[/img] 

Or give the picture margins with style=“margin: 1em 20em 0em 20em;”:
forum_logo2.jpg style=margin:1em 20em 1em 20em;

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg 
style="margin:1em 20em 1em 20em;"[/img] 

Or combine them all:

forum_logo2.jpg width=100px style=border:yellow inset 10px;background:lightblue; padding:5px;margin:1em 20em 1em 20em;

[img]http://www.centerforinquiry.net/themes/forum_themes/cfi_theme/images/forum_logo2.jpg width="100px"
 
style="border:yellow inset 10px;background:lightblue; padding:5px;margin:1em 20em 1em 20em;"[/img] 

Well, enough played around.

But for pictures that are too big so they blow up the page, it would be a good idea to set the width value.

[ Edited: 07 July 2015 07:20 AM by GdB ]
 Signature 

GdB

The light is on, but there is nobody at home.

Profile
 
 
Posted: 07 July 2015 07:29 AM   [ Ignore ]   [ # 1 ]
Sr. Member
Avatar
RankRankRankRankRankRankRankRankRankRank
Total Posts:  6516
Joined  2010-08-15

Very cool !

 Signature 

We need each other, to keep ourselves honest

Profile