展开div围绕儿童元素（无包装）

从我所看到的这是不可能的W/O JavaScript。我有一系列的图像在父div内。图像几乎局限于一种尺寸。我希望父div可以扩大或缩小图像。现在它切断了图像 - 我认为是因为溢出：隐藏;展开div围绕儿童元素（无包装）

这是ID，如果你看看与萤火虫：

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

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

我已经试过％，而且去除的高度股利。

CSS是最好的。如果没有，我打开javascript。

任何帮助表示赞赏。

来源

2012-07-18 Zak Weinberg

工作在铬 – Kishore 2012-07-18 05:25:36

精细只需使用适当的CSS。 – RobG 2012-07-18 05:31:47

@Kishore我的意思是围绕图像的白色div。它不会扩大我试图解释的方式。想象一下Jquery图像幻灯片，它可以扩展以适合水平和垂直图像。如果您单击我的示例中的白色框，它会拉下下一个图像，但剪切只显示适合父div的内容。希望我已经澄清了一点...... RobG - 我对“恰当的CSS”知识的有限范围是我为什么来到这里。 – 2012-07-18 05:38:22

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

添加宽度：100％到您的图片，这将适合div。

来源

2012-07-18 05:44:59 Narendra

雨 - 好主意，但它的大小照片分区。我试图完成的是让外部div缩小或扩大以适应内部内容 - 而不影响内部照片。 – 2012-07-18 05:50:56

在这种情况下，为您的div删除硬编码宽度值并使其居中对齐。 – Narendra 2012-07-18 10:05:45

雨，您的解决方案最终是我所做的 - 谢谢。 http://www.zakweinberg.com/imagezoomtour – 2012-07-30 22:28:37

由于您的img.zt-current元素为position:absolute，因此.zt-item div的高度为0。最重要的是，您在.zt-container div上有height: 450px。如果取下图像上的绝对位置以及容器上的固定高度，容器将展开以适合图像。问题在于，当它们执行动画过渡时，它会展开以显示图像，这可能不需要。

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

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

这类似于你想要什么：http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/

来源

2012-07-18 06:06:30

汤姆，由于精湛的无能和懒惰酿造，我从来没有考虑过这个问题）。我继续前进，并给每个img 100％的宽度和高度属性来填充容器。谢谢您的帮助。 http://www.zakweinberg.com/imagezoomtour – 2012-07-30 22:28:44

展开div围绕儿童元素（无包装）

回答

相关问题