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

Last Comment

Joe Weinpert

8/22/2022 - Mon

David Favor

12/16/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.

gr8gonzo

12/16/2018

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.

lenamtl

12/20/2018