Html CSS父元素子元素的大小百分比

我正在制作一个照片库，可以在鼠标悬停时缩放图像。因为页面是动态创建的，所以我不知道图像的大小

为了保持图像质量良好，图像是全尺寸的，CSS将其缩小到50%。鼠标悬停，图像放大到100%。问题是div块占用了页面上原始的未缩小图像大小，使得间距成为一场噩梦。（间距就像所有图像都是原始大小一样）

我的想法是用一个父div（imgholder如下）将“缩小”div括起来，该父div的宽度永久设置为50%，该div在鼠标悬停时不会改变大小，并且应该注意间距问题

如果我将imgholderwidth\height设置为一个设定值（比如300px），这会有些效果。但是由于图像的大小都不同，我需要将父div设置为子的百分比

建议采用什么方法设置父级尺寸

有没有更好的方法来实现照片库的缩放效果？（我想不出使用背景的方法，因为图像也是动态加载的）

我的CSS类似于

.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*/
}

<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>

我的HTML类似于

.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*/
}

<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>

“我需要将父div设置为子div的百分比”-我认为单独使用CSS是不可能的。“我想不出一种使用背景的方法，因为图像也是动态加载的”–如果您可以动态生成

，那么您应该能够同样轻松地动态生成

style=“background image:url（foo）”

。无论如何，您可能需要考虑使用JavaScript来实现这一点。然后，一旦图像完成加载，就可以很容易地读取图像尺寸，并动态地调整所有其他尺寸。至于在缩放图像时不必更改容器尺寸，您可能需要绝对定位图像。或者看看CSS 2D转换——这将在很大程度上从布局的其余部分分离“缩放”图像。感谢这些信息，我完全不反对java脚本，只是尝试扩展我的CSS知识。你在第二点上是对的，我想我是想远离内联风格。