MD Mostofa MD Mostofa - 3 months ago 6
CSS Question

why image show space and go right, it should be fill up the gap

I am trying to get my images to fill in the available space like the example website

link view
how can i show my image without space and it will be come with different height.
it should like example website.

under you get my code .
Live demo my code

code language html5

<div class="blog_posts">
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_5" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_3" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>



</div>


code language css

.blog_posts img {
width: 100%;
}

.blog_posts img.hg_t_1 {
height: 220px;
}

.blog_posts img.hg_t_2 {
height: 280px;
}

.blog_posts img.hg_t_3 {
height: 120px;
}

.blog_posts img.hg_t_4 {
height: 320px;
}

.blog_posts img.hg_t_5 {
height: 150px;
}

Answer

It's a bit hard to understand from your post but I think you're trying to get your images to fill in the available space like the example site you provided in the comments.

I don't think this is possible with pure HTML5/CSS, but there's a javascript library called Masonry which probably does what you're looking for.

Your HTML will look like this:

   <main>
       <img src="http://i.imgur.com/nQSRbvc.jpg" class="width33" alt="">
       <!-- the rest of your images -->
   </main>

The width33 class just sets the max-width of the image to 33%. This will allow the images to scale without changing the aspect ratio. And to initialize masonry just call it:

$('main').masonry({
  itemSelector: 'img'
});

Here's a jsfiddle example with your images: https://jsfiddle.net/fujtjf7q/

Comments