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.
CSSImages and PhotosHTMLJavaScriptjQuery

Avatar of undefined
Last Comment
Joe Weinpert

8/22/2022 - Mon
David Favor

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
Joe Weinpert

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.