AlliedModders - HTML Image question

AlliedModders (https://forums.alliedmods.net/index.php)

- Off-Topic (https://forums.alliedmods.net/forumdisplay.php?f=15)

- - HTML Image question (https://forums.alliedmods.net/showthread.php?t=68781)

HTML Image question

When you use the <img> tag in HTML you obviously fill out the src value and sometimes, not all, use the width and height values.

When an image is too large for the site and you want all the images (varying from different sizes) to be half the size, is there a way to do this without using calc.exe to find that a 974x562 image is 487x281 and plugin it in where the next image is 1232x834...

I was thinking possibly to do this:

Code:

<img src="images/art.jpg" width="1232/2" height="834/2" alt="Artwork" border="0">



<img src="images/art.jpg" width="1232*.5" height="834*.5" alt="Artwork" border="0">

But, with doubt, I was sure these wouldn't work, but I was wondering if there was a way to do this?

Re: HTML Image question

Lol...Its math,not counter strike problem -_-

Re: HTML Image question

Which is why I posted in the Off Topic/General Chat section of the forums...

Forget which thread you're in?

Re: HTML Image question

my html is a bit rusty, but did you try making the image size in percentages or use "em" instead of the default "px" units

Re: HTML Image question

I have tried the %age and did <img src="images/art.jpg" width="50%" height="50%" alt="Artwork" border="0">

I thought that that would work, cause it looked correct, but it didn't appear on the page. Similar to making it width="0" and height="0"

I am unfamiliar with em and wouldn't know how to do that, I will search a little bit on google.

Thanks for the great ideas though hoboman :)

Re: HTML Image question

Wait a second...

This is weird...

When I put:

Code:

<img src="images/art.jpg">

It comes in normal at full size.

When I put:

Code:

<img src="images/art.jpg" width="100%" height="100%">

It comes in at 50%...

Code:

<img src="images/art.jpg" width="50%" height="50%">

That makes it come in even smaller. I'm not sure why it is working all of the sudden. Maybe I have to define the original widths and heights in like javascript or something. Any ideas?

EDIT:

Here is a page I made, check the code see what's up...

Notice that the image at 100% isn't that same size as the original and the one at 50% isn't 50% than the original...

http://dizzythermal.oxyhostsfree.com/picture.html

That's the page... Thanks guys!

EDIT: I was also thinking that I might be able to use JAVASCRIPT (like I said before)

Code:

        <script type="text/javascript">

                if (document.images)

                {

                        picture                = new Image

                        picture.src        = 'picture.bmp'

                        picture.width        = '200px'

                        picture.height        = '200px'

                }

        </script>

This didn't work, not sure if this 'might' work and I just have the wrong syntax.

Re: HTML Image question

Quote:

Originally Posted by Dizzy (Post 600386)

Wait a second...

This is weird...

That's because that 'percentage' is related to browser's flow area rather than the image absolute size. I don't know what you're doing but counting on browsers to resize images is not a good idea due to distortion.

Re: HTML Image question

Basically, what I want to ultimately do, for faster coding purposes, be able to do <img src="pic.jpg" width="50%" height="50%"> and move on, not have to tidiously use Windows Calculator, take 747 and divide it in half. All the pictures are too big, because I render them in Rhinoceros 3D in high quality. But I want them to appear on the site in half the size.

It was mainly for faster coding purposes. I wasn't sure that it could be done, this is why I asked. I have looked on line for it, but I see how it references to the size of the page. I would want it to take that pic's size and divide it in half so it is half the size of the original picture.

Just wasn't sure if I could do this... I'm willing to keep editing the test page to try and get it right.

Re: HTML Image question

I'm don't know if you have a relevant medical condition (if that's the right term), but you really should be able to divide by two in your head. I can't imagine how this would be faster for you to write, it wastes bandwidth and is dependent on Javascript being enabled. It's just not a good idea.

Anyway..

PHP Code:


		
			
<script type="text/javascript">
<!--
function halfImageSize()
{
    var images = document.getElementsByTagName("img");
    
    for (i = 0; i < images.length; i++)
    {
        images[i].width /= 2;
        images[i].height /= 2;
    }
}
// -->
</script>

<body onLoad="halfImageSize();">

Re: HTML Image question

Maybe the motd thing resize it because the picture too big?Maybe...