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>

Answer 1

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.