3

从我所看到的情况来看，这在没有 javascript 的情况下是不可能的。我有一系列位于父 div 内的图像。这些图像几乎仅限于一种尺寸。我希望父 div 与图像一起扩大或缩小。现在它切断了图像 - 我认为是因为溢出：隐藏；

如果您使用萤火虫查看，这是 ID：

<div id="zt-container" class="zt-container">

<http://www.zakweinberg.com/imagezoomtour>

我已经尝试了百分比并删除了高度 div。

CSS是最好的。如果没有，我对 javascript 持开放态度。

任何帮助表示赞赏。

4

2 回答 2

1

因为您的img.zt-current元素是position:absolute，所以您的.zt-itemdiv 的高度为 0。最重要的是，你有height: 450pxdiv .zt-container。如果您取消图像上的绝对定位，以及容器上的固定高度，容器将扩展以适应图像。问题在于，当图像进行动画过渡时，它会扩展以显示图像，这可能是您不想要的。

.zt-container如果要保留动画过渡，您可能必须使用 javascript 更改 div 的高度。获取图像的高度，并使用它来设置容器的高度。就像是：

$('.zt-container').animate({
    height: $('img.zt-current').height()
});

这看起来类似于您想要的：http ://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/

于 2012-07-18T06:06:30.497 回答
0

我检查了Mozilla中的链接。问题仅在于第二张图像。

将 width:100% 添加到您的图像中，这将适合 div。

于 2012-07-18T05:44:59.580 回答