CODEWITHSUNDEEP
javascripthtmlcss
John Maher
John Maher

Reputation: 109

How can I control an image's size

I am a skilled database / application programmer for the PC. I am also an ignorant html / javascript / web programmer.

I am creating some documentation about some .Net assemblies for our intranet. Ideally I would like to display an image full size if the browser window can fit it. If not then I would like to reduce it and toggle between a small version and full size version by a click. It is a dependency chart and can be different sizes for different pages. I would prefer a single function to handle this but being it is for our use none of the requirements I mentioned is set in stone. I would like to make it work well but nothing is mandatory.

I read a lot of stuff but couldn't find anything that matched what I wanted. First I tried this (after a few iterations):

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'>

It has problems. First off it enlarges a small image and it looks funny. Second I would have to put the code in every page. Third it requires a double click to restore it. I was going to live with those short commings but the double click fails. I can't figure out how to restore it.

So I tried to get fancy. I couldn't figure out how to get past problem 1, but solved 2 and 3 by creating a function in a separate file. Then I ran into what appeared to be the same problem. This was my second attempt:

function ImageToggle(Image)
{

    if (ImageToggle.FullSize == 'undefined')
        ImageToggle.FullSize = false;

    if (ImageToggle.FullSize)
        {
            Image.width='100%';
            ImageToggle.FullSize = false;
        }
    else
        {
            Image.width=Image.naturalWidth;
            ImageToggle.FullSize = true;
        }

    return 0
}

And in my page:

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'>

Can what I want be done? It doesn't sound impossible. If it is a large amount of effort would be required then alternate suggestions are acceptable.

Upvotes: 0

Views: 113

Answers (5)

John Maher
John Maher

Reputation: 109

Thanks all for your help. Rob and Mike both pointed me to an excellent solution. I now have my page load with an image that fits the browser window, resizes with the browser and if the user is interested they can expand the image and scrollbars appear if necessary. I got this to work in a function so minimal code is needed for each page.

To load the image:

<p style="overflow:auto;">
    <img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'>
</p>

And the function:

function ImageToggle(Image)
{
    if (ImageToggle.FullSize == 'undefined')
        ImageToggle.FullSize = false;

    if (ImageToggle.FullSize)
        {
            Image.style="max-width: 100%";
            ImageToggle.FullSize = false;
        }
    else
        {
            Image.style="max-width: none";
            Image.width=Image.naturalWidth;
            ImageToggle.FullSize = true;
        }

    return 1
}

Upvotes: 0

Marina
Marina

Reputation: 91

Does it have to be a toggle or would a mouseover work for you as well?

<style>

.FullSize { width:100px; height:auto; }

.FullSize:hover { width:90%; height:auto; }

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

Note: when image is made larger IN the page - the surrounding content will be displaced around it - depending on how you have set up the layout.

Also if you have any body margins or table or div paddings, using image width at 100% will make the page scroll. To check just change 90% to 100% and work your way up / down.

You could also force the image to be a specific size until the browser gets made smaller by the user / has a smaller resolution.

<style>

.FullSize {width:1000px;max-width:100%;height:auto;}

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

A tip: the image used must be the largest one. So minimum width of lets say 1200 pixels wide (if that is the forced image size you use). That way regardless of size it is it will remain clearer than a small image becoming a large. Since it's an intranet, file size shouldn't be an issue.

Upvotes: 0

Syed Muhammad Zeeshan
Syed Muhammad Zeeshan

Reputation: 1045

if you want to get current browser window size and if you want to do it on a click event so try this in jquery or javascript:

<script>

$("#myButton").click(function(){
        var x = window.innerHeight;              // put current window size in x (ie. 400)
});

</script>

Upvotes: -1

Rob Farr
Rob Farr

Reputation: 853

I would recommend that you set a the max-width: 100% CSS property for the image.

This will prevent the image's width from expanding to be greater than the container's width.

You can also do the same with max-height: 100% if you are having problems with the image overflowing vertically.

Please see this JSFiddle for an example.

(Note: If you set both a width and a height attribute on the <img> tag directly or in your CSS file your image will not be scaled proportionally.)

Upvotes: 1

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53538

You're probably interested in the max-width: 100% CSS property, rather than a flat-out width:100%. If you have a tiny image, it'll stay tiny. If you have a huge image, it gets resized to the width of the containing element.

For example: http://jsbin.com/kabepo/1/edit uses a small and a huge image, both with max-width:100%. As you can see, the small image is untouched, the huge image is resized to something sensible.

Upvotes: 1

Related Questions