絶対配置され、適切なサイズのDIVをすべてのブログ投稿画像にオーバーレイしますか？

Question

私はブログの投稿がたくさんあります。それぞれの投稿には画像が含まれています。 jQueryでは、重複している画像のサイズに正確に合致する絶対配置されたdivで、これらの画像のそれぞれをオーバーレイしたいと思います。これについてどうすればいいですか？

すべての投稿に画像があり、すべての画像の幅は同じですが、高さは変わります。ここで

は私のポストコンテナが構成されている方法は次のとおりです。

<section id="featured-posts"> 
    <article> 
    <img src="post_image.jpg"> 
    <h1>Post Headline</h1> 
    <div class="post-description"></div> 
    </article> 

    <article> 
    <img src="post_image.jpg"> 
    <h1>Post Headline</h1> 
    <div class="post-description"></div> 
    </article> 
</section> 

Answer 1

$('#featured-posts article').each(function(){ 
    var $cont= $(this).css('position','relative'), $img= $cont.find('img');          
    var pos=$img.position(), w= $img.width(), h=$img.height(); 
    var $over=$('<div class="over">').css{ position: 'absolute', top: pos.top, left: pos.left, width: w, height: h, "z-index":10}) 
    $cont.append($over); 
}) 

あなたは明らかにCSSルールにスタイルプロパティの一部を移動し、すでにアブソまたは相対

Answer 2

この場合の相対位置を削除することができます非常に可能であり、実際には非常に単純です。あなたはあなたが持っているhtmlモックを提供し、これをどうやってやろうとしているかを私たちに知らせることで、これをもっと簡単にすることができます。あなたはajax、phpを使って画像を読み込んでいるのですか、またはHTML内に静的に配置しますか？

どちらの方法でも、画像を親div要素内に置き、divを兄弟として追加することをお勧めしますimg。

<div class="contianer"> 
    <div class'img-wrap'> 
     <img src="#" /> 
     <div><div> 
    </div 
</div> 

あなたはそのようにのようなこれらの要素のスタイルを設定することができます

<style> 
    div.img-wrap{ 
     width:200px; 
     height: 200px; 
     position:relative; 
    } 

    div.img-wrap img, div.img-wrap div{ 
     width:inherit; 
     height:inherit; 
    } 

    div.img-wrap div{ 
     position:absolute; 
     top:0; 
     left:0; 
    } 
</style> 

今divが画像と同じサイズで、画像を重ね合わせています。少なくともそれを別のショットを与えていない場合

希望これは、あなたの問題を解決しました。）