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


Tags: javascript,jquery,html,css,html5

Problem :

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;
}


Solution :

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/


    CSS Howto..

    How to get multiple bottom only borders on a circle

    How to display loading.gif at the center of the screen which has a scrollbar

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to recalculate css with jQuery window resize?

    How to display CSS files in Django blog?

    How to find last/first not empty child using only CSS?

    How I can write CSS for IE. My code not work in IE10 nor 9,7,8?

    How to stop all CSS overrides on a container DIV?

    How can I override an external css?

    How to solve this (seemingly simple) formatting problem in CSS?

    How to limit a transform scale to the width and height of the parent element in CSS?

    How to strikethrough empty div

    jason lewis basset did not show icons well in laravel 4

    using the unorthodox `head {display: block}` to show text to user?

    CSS - how to make responsive images

    How can I stop mobile Safari from pausing before beginning a transition

    how do I make overflowing and float positioned elements stay all on one line?

    how to show element if visible in view-port with jQuery? (UPDATE)

    css code how to change active navigation button color

    how to put all labels in bold with css

    How to make a grid of interactive elements?

    How to crop and design these images like this using html and css? [closed]

    HTML Table Header isn't showing, how can it be fixed?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to override the height of parent node using CSS?

    How do I make a DIV tag stretch to the size of it's children?

    How to Link to Images in CSS file in RoR 3.2 Project?

    How to force the casing of letters in a textbox

    How do I center a dynamic div?

    How would you code this: The SO highlighted button outline effect [closed]