0

I need a way to scale image to width of window below is the code I currently wrote - any suggestions. Height should automatically adjust to width thus maintaining inherent ratio of image.

If i change the CSS do i even need to set height since it will automatically resize to set Width and maintain ratio?

<body>
<script>

    window.onload = resizeImage;

   (function($){

        $(window).enllax();

    });

    function resizeImage(){

        var w = window.innerWidth

       var images = document.getElementsByClassName("main");
        for(var i = 0; i < images.length; i++)
        {
            images(i).item.style.maxWidth = w;

        } 

    </script>

        <img class="main" src="images/bangkok.jpg">



</body>
syntax.bug
  • 1
  • 2

1 Answers1

1

For scaling an image to the width of window, you can use the CSS property,"width" and give the values in percentages.

Example, if you want to make the image cover 80% of the window, write this:

width:80%;

Set height to auto for retaining the ratio of inherence:

height:auto;
A J A Y
  • 585
  • 1
  • 7
  • 22
  • 1
    This is true while your outer container is wide as the window. – Zorken17 Jan 04 '17 at 12:39
  • vw is a potential alternative to percent (it isn't supported in opera mini, IIRC, so you may want a fallback if supporting OM is important) –  Jan 04 '17 at 12:47
  • I agree, but VW(Viewport Width) is a sensitive unit. I believe 1VW roughly equals 12.05 pixels. Hence, it is not commonly used. But i agree that it is a good fix. – A J A Y Jan 04 '17 at 13:00