0

だからこれは私を殺しています。

多くのフォーラムを見てきましたが、解決策が見つからないようです。

基本的に、フローティング要素のグリッドがあり、それぞれにサムネイル画像があり、ホバーすると、そのギャラリーに含まれるもののオーバーレイとテキストの説明があります (これは典型的なフォリオ サイトです)。

通常、各画像と同じサイズのオーバーレイボックスと、ホバー時にオンとオフを切り替える同じ幅のテキストコンテナーを備えた固定レイアウトがあります。しかし、これはサイトの最初のレスポンシブ バージョンであり、オーバーレイとテキストのサイズを親のサイズと一致させる方法がわかりません。

それらをすべて div でラップしようとしましたが、子要素はとにかく親の次元を無視しているようです - おそらくそれらが浮かんでいるためです。

問題のサムネイル画像にはコメントが付いていますが、それ以外は完全に機能します。

1 つの div を別のレスポンシブ img の幅と一致させる方法はありますか? どんな助けでも大歓迎です。

これが私のhtmlです

<div class="flex_one">

   <div class="blackbox"><!--black low opacity box - appears on hover--></div>

   <div class="textcontainer"><h2>ART</h2></div> 

   <a class="fancybox-thumb" rel="gallery2" href="image1.jpg"><!--gallery image 1-->

   <img class="icon-image" src="thumb.jpg"  alt="main icon" /><!--This is the thumbnail image on page-->
</a>

   <a class="fancybox-thumb" rel="gallery2" href="image2.jpg"><!--gallery image 2-->
 </a>

これは私のCSSです

.flex_one {
    width:28%;
    height:auto;    
    float:left;
    background-color:#000;
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .icon-image {
        width:100%;
        height:auto;
    }

    .blackbox {
        height:???;
        width:??;
        overflow:auto;
        opacity:0;
        background-color:#000;
        position: absolute;
        pointer-events:none;    
    }

    .textcontainer {
        width:??;
        margin-top:0px;
        height: 20px;
        background-color:rgba(0,0,0,0);
        pointer-events:none;
        position:absolute;
        background-color:transparent;
    }

    .textcontainer h2{
        text-decoration: none;
        font-size: 13px;
        font-family: 'Raleway', sans-serif; text-transform: uppercase;
        color:#FFF;
        z-index:80000;
        opacity:0;
        transform:scale(0);
    }

.flex_one:hover > .textcontainer h2 {
    transform:scale(1);
    opacity:1;
}

.flex_one:hover > .blackbox {
    opacity:.7;
}
4

1 に答える 1

0

親のサイズを取得するには、高さと幅を 100% に設定した同じレベルに透明な画像である blank.png を使用できます。

それ以外の場合は、次のように jQuery を使用できます。

$(document).ready(function(){
   $('.blackbox').each(function(){
        $(this).css({
           "height" : $(this).parent('flex_one').outerHeight(); 
           /* or height, outerHeight(true) */
           "width" : $(this).parent('flex_one').outerWidth();
           /* or width, outerWidth(true) */   
        });
   });
});
于 2015-09-02T14:51:48.330 に答える