1

  page {
    background: #fff;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    position: relative;
  }
  page[size="A4"] {
    width:21cm;
    min-height: 29.7cm;
  }
  page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    min-height: 21cm;  
  }
  @media print {
    body {
        visibility:hidden;
    }
    page[size="A4"] > * {
        visibility:visible;
    }
  }
<page size="A4">
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>

As you can see in the second row there is right side image and left part is empty. I want all images in the row. But the following condition is applied.

  1. Height and width of the images are dynamic.
  2. How much image will contain in the single row is also dynamic.
  3. The width of the page is static.

How can I remove empty white space and resolve this issue?

shah rushabh
  • 155
  • 1
  • 1
  • 8
  • clear your floats. see [here](https://stackoverflow.com/questions/8554043/what-is-a-clearfix) – zgood May 30 '18 at 12:43
  • Are you setting widths to the image containers? If you want them all to float in one row their combined width can NOT surpass the view width – Gezzasa May 30 '18 at 12:43

4 Answers4

1

Use flex box. And Set the display to flex with flex-wrap:wrap.

page {
    background: #fff;
    display: flex; // updated this
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    position: relative;
    flex-wrap: wrap;
  }
  page[size="A4"] {
    width:21cm;
    min-height: 29.7cm;
  }
  page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    min-height: 21cm;  
  }
  @media print {
    body {
        visibility:hidden;
    }
    page[size="A4"] > * {
        visibility:visible;
    }
  }
<page size="A4">
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
    <div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
  • They don't stay inside of the container they're in – Gezzasa May 30 '18 at 12:46
  • 1
    this makes it all 1 row... probably need `flex-wrap` set – zgood May 30 '18 at 12:47
  • @Sunil Garg dude problem in print can you access this URL and try to print it? https://www.vsss.co.in/Admin/index.php/Barcode_printing?Barcode_id%5B%5D=5443&Quantity%5B%5D=12&Barcode_language%5B%5D=Both&Barcode_id%5B%5D=5444&Quantity%5B%5D=1&Barcode_language%5B%5D=Both&Barcode_calculation_mode=Auto&Units%5B%5D=11&Units%5B%5D=13&Language=Both You will see problem in bottom. – shah rushabh May 30 '18 at 12:56
  • @shahrushabh What problem? – FINDarkside May 30 '18 at 13:02
  • @shahrushabh , what is the problem, I am able to access the URL, you want to print it on one page? – Sunil Garg May 30 '18 at 13:03
  • Bro tries the print command and at page end, you will see the row is breaking. empty space. – shah rushabh May 30 '18 at 13:05
  • And no I don't want to print it on one page just look at last row of the first page. You will understand the issue. Please help me. – shah rushabh May 30 '18 at 13:10
  • I am trying will let you know soon – Sunil Garg May 30 '18 at 14:08
1

You can use Flexbox here. Apply display: flex to page[size="A4"] element.

And also remove float: left inline style. No need here.

page {
  background: #fff;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  position: relative;
}

page[size="A4"] {
  width: 21cm;
  min-height: 29.7cm;
  display: flex;
  flex-wrap: wrap;
}

page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  min-height: 21cm;
}

@media print {
  body {
    visibility: hidden;
  }
  page[size="A4"]>* {
    visibility: visible;
  }
}
<page size="A4">
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
  <div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
0

I reworked your example to work with Bootstrap v4.

I used row class to create a row and col-md-3 class to allow 4 images per row.

Bootstrap only supports up to 12 columns in a row. E.g 4 images = 12 / 4 which gives you col-*-3

Then I gave .col-md-3 img properties: width: 100%, height: 100%

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<page size="A4">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

        <div class="row">
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
      </div>
      <div class="col-md-3">
        <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
      </div>
    </div>

  </div>
</page>

CSS

page {
  background: #fff;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  position: relative;
}

page[size="A4"] {
  width: 21cm;
  min-height: 29.7cm;
}

page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  min-height: 21cm;
}

@media print {
  body {
    visibility: hidden;
  }
  page[size="A4"]>* {
    visibility: visible;
  }
}

.col-md-3 img {
  height: 100%;
  width: 100%;
}

Here's JSFiddle: https://jsfiddle.net/ezcrtn22/2/

Alex
  • 2,164
  • 1
  • 9
  • 27
  • You may also clear the gutters but adding a `nogutter` class to the `row` div. `.nogutter { margin: 0 !important; padding: 0 !important; }` – Alex May 30 '18 at 13:06
-2

Giving all your divs a fixed height, solves the problem (this height should be the maximum of all the images). Even better would be a resizing of the images towards a fixed height, this prevents the images from being cut of.

Actually I don't see any need for divs around the images you could simply omit them.

  page {
    background: #fff;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    position: relative;
  }
  page[size="A4"] {
    width:21cm;
    min-height: 29.7cm;
  }
  page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    min-height: 21cm;  
  }
  @media print {
    body {
        visibility:hidden;
    }
    page[size="A4"] > * {
        visibility:visible;
    }
  }
page img {
  height: 170px;
  float: left;
}
<page size="A4">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
    <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
</page>
Daniel
  • 3,541
  • 3
  • 33
  • 46