Having a JPG resizeable and moveable

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

Do more with

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

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.

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.
Sr Application Engineer & Developer
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