Link to home
Start Free TrialLog in
Avatar of Joe Weinpert
Joe Weinpert

asked on

Having a JPG resizeable and moveable

Have a jpg image that needs to be:
  • Opened and displayed
  • Resizeable using its lower-right corner
  • Draggable around the screen
  • Closeable
When first opened, it needs to be resized to fit inside whichever parent element is holding it ... a <div> maybe?
There should be no scrollbars.  Whatever size the parent is dragged to then that is the size of the jpg (but it remains the same ratio).
I thought this would be simple, but nothing I tried so far has worked.  Tried <img>.  Tried background-image.  I must be missing something.
Tools we use here are HTML5, CSS3, jQuery, and JavaScript.
Chrome is the web browser used internally.
Avatar of David Favor
David Favor
Flag of United States of America image

This is highly complex code, especially getting this to work consistently across all browsers.

Unless you have infinite time + money on your hands for this development, likely best to use an existing Javascript Window System library.

Try these searches... javascript window system jquery window system

Likely best to use a JQuery based library, so you leverage all the JQuery code.
It sounds like you want a responsive image. The basic idea is pretty simple:

<div style="width:200px;height:300px;background-color:red;">
  <img style="width:auto;max-width:100%;max-height:100%;" src="yourimage.jpg" />

Open in new window

Play with the width and height of the <div> and you should see the image resize with the correct aspect ratio to fit the size of the <div>. Any extra space (assuming the <div> might not always share the same aspect ratio as the image) should display the red <div> background color.

From there, you can use jQuery and plugins to make the <div> draggable/resizable/closeable.
Avatar of Joe Weinpert
Joe Weinpert

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial