Question

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

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

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

如果我将 imgholder width \ 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*/
}

我的HTML类似于......

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

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

0 个答案: