What’s the best way to rotate an image with JavaScript while keeping it inside its parent div?

General Discussions
1

I’ve tried libraries like jQuery rotate, but the image rotates around its center, causing parts of it to overlap with other content if it’s not perfectly square. I need the image to stay within its parent div, which has max-width and max-height set. Here’s how I’m currently using jQuery rotate:

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});
2

To rotate an image within its parent div while keeping it contained and avoiding overlap, you need to adjust the image’s rotation without causing it to exceed the boundaries of the parent element. The problem you’re facing with libraries like jQuery Rotate is that they usually rotate the image around its center, which can cause parts of the image to overflow out of its container.

One simple approach is to use CSS to rotate the image using the transform property while setting the transform-origin to ensure the rotation occurs within the bounds of the parent div. You can control the rotation angle dynamically with JavaScript.

Example:

<div class="parent" style="width: 300px; height: 300px; overflow: hidden; position: relative;">
    <img id="image" src="your-image.jpg" style="width: 100%; height: 100%; object-fit: contain;">
</div>
<button id="button">Rotate</button>

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css({
        'transform': 'rotate(' + angle + 'deg)',
        'transform-origin': 'center center'
    });
});

Key Points: The transform-origin is set to ‘center center’, ensuring the image rotates around its center point.

The object-fit: contain ensures the image stays within the bounds of its parent while scaling.

This method works well if you want a smooth rotation without worrying about the image overflowing or clipping.

3

If you want to manually adjust the image size or positioning when rotating it to ensure it stays inside the parent div, you can use a combination of CSS transforms and JavaScript.

Example:


<div class="parent" style="width: 300px; height: 300px; overflow: hidden; position: relative;">
    <img id="image" src="your-image.jpg" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div>
<button id="button">Rotate</button>


    var angle = 0;
    $('#button').on('click', function() {
        angle += 90;
        var img = $('#image');
        img.css({
            'transform': 'translate(-50%, -50%) rotate(' + angle + 'deg)'
        });

        // Adjust image size to prevent overflow
        var newWidth = Math.min(img[0].naturalWidth, img[0].naturalHeight);
        var newHeight = newWidth; // Keep square aspect ratio
        img.css({
            'width': newWidth + 'px',
            'height': newHeight + 'px'
        });
    });

Key Points:

The image is absolutely positioned and centered using transform: translate(-50%, -50%).

Each time you rotate the image, the size is adjusted to keep the image within the parent div’s bounds.

The rotate transformation adjusts the rotation, while we make sure to keep the image centered.

4

Rotating with a Containing Element (Using transform: rotate() with JavaScript) If you want more control over the image rotation and want to prevent the image from overflowing, another approach is to wrap the image inside a container and rotate the container instead of the image. This helps in managing the overall layout better.

Example:

<div class="parent" style="width: 300px; height: 300px; overflow: hidden; position: relative;">
    <div id="container" style="width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform-origin: center center;">
        <img id="image" src="your-image.jpg" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
</div>
<button id="button">Rotate</button>

  var angle = 0;
    $('#button').on('click', function() {
        angle += 90;
        $('#container').css({
            'transform': 'rotate(' + angle + 'deg) translate(-50%, -50%)'
        });
    });

Key Points: The image is wrapped inside a #container, which is rotated, ensuring the image itself doesn’t exceed the parent bounds.

By rotating the container, the image stays inside and is easier to manage visually.

The container is centered in the parent div, and the image’s size is preserved with object-fit: contain.