Наложить абсолютное позиционирование, соответствующий размер DIV на все изображения в блоге? - PullRequest
Новая
       20

Наложить абсолютное позиционирование, соответствующий размер DIV на все изображения в блоге?

0 голосов
/ 28 февраля 2012

Итак, у меня есть куча постов в блоге, и каждый пост содержит изображение. С помощью 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>

Ответы [ 2 ]

2 голосов
/ 28 февраля 2012 
$('#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 и удалить положение относительное, если оно уже является абсолютным или относительным

0 голосов
/ 28 февраля 2012

это очень возможно и действительно очень просто. Вы могли бы сделать это намного проще, предоставив любой 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 имеет тот же размер, что и изображение, и накладывает его на изображение.

Надеюсь, что это решило вашу проблему, если не хотя бы сделать еще один выстрел;)

...