CSS Parent element percent size of child - html

Question

I'm working on a photo gallery that will zoom the images during mouse over. Because the page is created dynamically, I won't know the image sizes.
To keep the image quality good, the images are full size and the CSS shrinks them to 50%. On mouse over, the images enlarge to 100%. The problem is that the div blocks take up the original unzoomed-out image size on the page, making spacing a nightmare. (spacing is as if all images were original size)
My thought was to enclose the "zoomed out" div with a parent div (imgholder below) that has it's width permanently set to 50%, this div won't change size when moused over, and should take care of the spacing issue.
This works somewhat if I set the imgholder width\height to a set value (say 300px). But since the images are all different sizes, I need to set the parent div to a percent of the child..
What would be the recommended way to set the parent sizes?
Is there a maybe a better way to do the zoom effect for a photo gallery? (I can't think of a way to use backgrounds since again the images are loaded dynamically)
my CSS is similar to...
.zoomout{
display: inline-block;
position: relative;
-moz-transform:scale(.5);
-webkit-transform:scale(.5);
-o-transform:scale(.5);
}
.zoomout:hover{
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.imgholder{
display: inline-block;
width:200px; /*this is where i run into problems*/
height:200px; /*this is where i run into problems*/
}
my HTML is similar to...
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/4.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/5.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/6.jpg"/></div></div>