I have an image within a div. I scale the image with CSS transforms to 2.5 times it's 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>