Resize images to fit image control in asp.net javascript

Question

I change an image in the header based on which menu item is selected. The problem is that the image stretches in the image control. I want it to automatically zoom without distorting the image. Is this possible.

Note: The images reside in an images folder and are not all the same size.

Javascript

<script type="text/javascript">

    function ChangeProjectImage(imgpath) {
        var img1 = document.getElementById("Image2")
        img1.src = imgpath;
    }

</script>

davehale23 · Accepted Answer · 2012-10-13 15:34:02Z

2

I would recommend setting the CSS property 'width'. Use a width that suits your needs and your images. It will be implemented like this:

width:300px;

Since you don't want to distort your images, you should likely use the smallest width that your images have. All these images have different widths, but since the 'width' property is set to 80px, they all look like the same width, without distortion.

answered Oct 13, 2012 at 15:34

davehale23

4,3722 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Troy Mitchel Over a year ago

Your solution worked out great! Thank you. I made sure not to set the height property because that was distorting it.

Chandra Sekhar Walajapet · Accepted Answer · 2012-10-13 15:36:59Z

0

I don't think you can automatically zoom, except you know how much zoom are you looking for.

CSS

Zoom:200%;

answered Oct 13, 2012 at 15:36

Chandra Sekhar Walajapet

2,55418 silver badges24 bronze badges

1 Comment

Troy Mitchel Over a year ago

so i would have to mathamatically figure out the image size then set the Zoom style accordingly?

Collectives™ on Stack Overflow

Resize images to fit image control in asp.net javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related