/    Sign up×
Community /Pin to ProfileBookmark

Reposition Image within Image tag

Copy linkTweet thisAlerts:
Mar 25.2022

You can do this on facebook with your cover image.

What I currently have is a image tag placed inside my header. From within my admin page I want to drag this image around in the parent so it’s positioned perfectly.

I’m not sure if the image itself is being or needs to be moved in the IMG or if the img tag is being moved within the parent DIV.

Any help please

to post a comment
CSSHTMLJavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMar 25.2022 — Some time ago I created a draggable image based on this resource:

https://blog.pliszko.com/2021-04-10-draggable-elements-in-javascript-without-external-libraries/

Works fine, even on touch devices, however there is no zooming feature and no constraint that the image should not exceed the borders of the container.

Both might be added fairly easily.

Another option is jQuery UI, however it doesn't work on touch devices:

https://jqueryui.com/draggable/#constrain-movement

A really powerful script is this one:

https://github.com/fengyuanchen/cropperjs
Copy linkTweet thisAlerts:
@ramisthand76Mar 25.2022 — You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

[myfiosgateway.one](https://myfiosgateway.one/)

[mobdro](https://tutuappvip.co/mobdro-download)
×

Success!

Help @singaporeDude spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...