Home/ Questions/Q 704567
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:57:22+00:00

I have an image within a div. I scale the image with CSS transforms

  • 0

I have an image within a div. I scale the image with CSS transforms to 2.5 times its original size. That works, but it overlays the containing div. I want it to stay within the containing div, is that possible?

<html>

<script language="javascript">    
    function zoom()
    {
        var myLayer = document.getElementById('layer');
        var myPhoto = document.getElementById('photo');

        myPhoto.style["-webkit-transform-origin"] = "50% 50%";
        myPhoto.style["-webkit-transform"] = "scale(2.5)";
    }

</script>

<body onload="zoom();">

<div id ="layer" style="height:700px; width:1000px; background-color:yellow;  text-align: center; vertical-align: middle;" onClick="javascript:toggleZoom();"><img id="photo" src="http://farm1.static.flickr.com/42/77156587_fa5aef2c4c_o.jpg" width="500" height="332"></div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have you tried just putting overflow:hidden on the containing div?

    • 0