Line break with height of different images, Bootstrap

Question

Line break with height of different images, Bootstrap

Navigation

#1 by (0 votes)

1

I have a problem with my Grid with line break, the images come from a database and are of different heights, some horizontal and some vertical.

I'm using the bootstrap.

I have this code

<div class="row">
<div class="col-sm-4 borda_cat">

<a href="produtos/<?php echo $row_categoria2["url"] ?>/<?php echo $row_subcategoria2["url"] ?>/<?php echo $row_produtos["url"] ?>" class="hvr-bubble-top"><img src="uploads/<?php echo $row_fotos_produtos["nome"]?>" class="img-responsive"></a>  

</div>                    
</div>

on the site the images look like this

How would you line up the columns with the heights different?

bootstrap-3

asked by anonymous 12.07.2017 / 22:13

1 answer

Create persistence of categories and subcategories with jquery How to make the optgroup access a page

score 0 · Answer 1

You can do thumbnails. You can do "manually" by cropping the images and saving the thumbs, or you can make "virtual" that would be at runtime, an excellent library to do this is the Smartcrop .

jQuery(document).ready(function($){
    $('.borda_cat').each(function(i, el){
    crop($('img.img-responsive', el).get(0), $(el).width());
  });
});

function crop(image, size) {
  console.log('crop',image);
  var options = {debug: false, width: size, height: size};
  var _img = new Image;

  _img.crossOrigin = 'Anonymous';
  _img.onload = function() {
    window.setTimeout(function() {
      var img = this;
      console.log('start crop');
      smartcrop.crop(img, options, function(result) {

        var crop = result.topCrop;
        var canvas = $('<canvas />')[0];
        var ctx = canvas.getContext('2d');
        canvas.width = options.width;
        canvas.height = options.height;
        ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height);

        $(image).hide().after(canvas);

        console.log('crop end');
      });
    }.bind(this), 100);
  };
  _img.src = image.src;
}