Question

我在div上显示缩略图，其溢出：隐藏为其样式属性。

当我点击一个缩略图时，我用更大的视图替换图像（这会产生缩放效果），但由于某些图像非常大，因此会被其父级划分。

所以，我希望该特定缩略图违反其父规则并退出并显示其100%self。

^{我提出这个问题的主要原因是获得/提供一个好的工作解决方案。找到最好的解决方案是this。}

Answer 1

执行此操作的最简单，最有效的方法是将以下属性添加到图像以完成工作。

位置：绝对

在具有绝对定位后，它会跳出容器，直到找到另一个相对容器，从而违反其父规则。

我创建了一个简单的演示^[here]来说明这种情况和解决方案。

Answer 2

我假设你已经尝试通过jquery点击修改元素css了吗？

$(this).css('overflow', 'visible');

清除放大的图像时，只需使用jquery恢复css修改。

如果由于某种原因这对你不起作用，你可以为放大的图像创建一个隐藏的div。使用jquery创建一个更改源的click事件，并显示包含不同css属性的div。再次，使用清除点击事件隐藏该div。

Answer 3

理想情况下， div应该没有声明宽度和高度（意思是：让内容决定它的尺寸）

$('div_selector_here').on('click',function(){

    //try one of the following:
    //they both stretch the div to the image IF it has no width and height declared:

    // if width and height are declared for the div, this will leak the image out of the container
    $(this).css('overflow','visible'); 

    //if width and height are declared for the div, this will add scrollbars
    $(this).css('overflow','auto'); 

});

另外，你可以添加它以确保图像在div中舒适（并且再次，它的想法是你没有设置div的宽度和高度）：

img{
    display:block;
    width:100%;
}

覆盖'overflow：hidden'的父CSS规则

3 个答案: