-1

So I have been trying to make an image fit to the window size. Is there any way to resize a div to window width while keeping the right ratios using an event listener? I have looked through the internet but nothing has worked. I think that it will be using stuff like this. when resize expand to window width, hight = 5/3 width. It will most likely use an EventListener. i have tried making width 100% but that just cuts off the bottom of the image not letting me scroll down to see the rest.

sharkyevno
  • 3
  • 3
  • Does this actually have to be done with the JavaScript or is just doing this in CSS sufficient? – BSMP May 06 '16 at 14:49
  • Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D May 06 '16 at 14:49
  • Possible duplicate of [Responsively change div size keeping aspect ratio](http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) – BSMP May 06 '16 at 14:51

3 Answers3

0

Try this code

window.onresize = function(){
    div.style.width = window.innerWidth + 'px';
    div.style.height = window.innerHeight + 'px';
}
Mostafiz
  • 7,243
  • 3
  • 28
  • 42
kmaork
  • 5,722
  • 2
  • 23
  • 40
0

Set image width to 100%, don't set a height and the image will maintain aspect ratio.

<body>
  <img src="..." style="width: 100%" />
</body>

See example: http://codepen.io/jessegavin/pen/QNzeaX

jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • i have tried this but the problem is that this way cuts off the bottom of the image i want it to be able to scroll down. – sharkyevno May 09 '16 at 14:13
  • This technique can potentially cut off the bottom of the image, but you _can_ still scroll down. – jessegavin May 11 '16 at 02:37
0

CSS is the way you should go. width: 100%;is one thing you can go. But if your viewport is scaleable, you should use width: 100vw;.

SimonSolutions
  • 97
  • 1
  • 4