Image resizer

by ckissi

HTML

<div class="container">
        <div class="resizable-div">
            <div class="ruler ruler-left"></div>
            <div class="ruler ruler-right"></div>
        </div>
    </div>

CSS

.container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 50px auto;
        }
        .resizable-div {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: #f0f0f0;
            border: 10px solid #007bff;
            box-sizing: border-box;
        }
        .ruler {
            position: absolute;
            top: 0;
            width: 10px;
            height: 100%;
            background-color: #007bff;
            cursor: ew-resize;
        }
        .ruler-left {
            left: -10px;
        }
        .ruler-right {
            right: -10px;
        }

JavaScript

const container = document.querySelector('.container');
        const resizableDiv = document.querySelector('.resizable-div');
        const rulerLeft = document.querySelector('.ruler-left');
        const rulerRight = document.querySelector('.ruler-right');

        let isResizing = false;
        let currentRuler = null;
        let startX;
        let startWidth;
        let startLeft;

        function initResize(e) {
            isResizing = true;
            currentRuler = e.target;
            startX = e.clientX;
            startWidth = resizableDiv.offsetWidth;
            startLeft = resizableDiv.offsetLeft;
            document.addEventListener('mousemove', resize);
            document.addEventListener('mouseup', stopResize);
        }

        function resize(e) {
            if (!isResizing) return;
            const diff = e.clientX - startX;
            let newWidth, newLeft;

            if (currentRuler === rulerLeft) {
                newWidth = startWidth - diff * 2;
                newLeft = startLeft + diff;
            } else {
                newWidth = startWidth + diff * 2;
                newLeft = startLeft - diff;
            }

            if (newWidth > 100 && newWidth <= container.offsetWidth) {
                resizableDiv.style.width = newWidth + 'px';
                resizableDiv.style.left = newLeft + 'px';
            }
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('mouseup', stopResize);
        }

        rulerLeft.addEventListener('mousedown', initResize);
        rulerRight.addEventListener('mousedown', initResize);