親CSSルールの 'overflow：hidden'を無効にします。

Question

divに、スタイル属性としてoverflow：hiddenを使用してサムネイルを表示しています。

サムネイルを1つクリックすると、画像が拡大表示されます（ズーム効果が作成されます）が、画像の一部が非常に大きいので、親の分割によって切り捨てられます。

ですから、その特定のサムネイルが親ルールに反して外に出て、100%selfを表示したいと思っています。この質問をぶつけする

---

^{私の主な理由は、/取得の良い実用的なソリューションを提供することです。最高のものはthisです。}

Answer 1

これを行う最も簡単かつより効率的な方法、仕事を得るために、画像に次のプロパティを追加しました。

位置：絶対

それは、このように、親ルールを挑む、別の相対的な容器を発見するまで、その容器から絶対配置、そのジャンプをした後。

私はこのような状況と解決策を説明するための簡単なデモ^[here]を作成しています。

Answer 2

クリックしてjqueryで要素cssを変更しようとしたとしますか？

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

拡大画像を消去すると、jssを使用して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%; 
}