Having a JPG resizeable and moveable

Joe Weinpert
Joe Weinpert used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
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...

site:github.com javascript window system

site:github.com jquery window system

Likely best to use a JQuery based library, so you leverage all the JQuery code.

Commented:
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" />
</div>

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.
Sr Application Engineer & Developer
Commented:
Project cancelled

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial