Q:

How to Crop the GoogleAPI QR code image in Bootstrap?

As we all know google provide as Free API named:developer.google.com
but this api has some limitation that we cannot customize according to us. but its simple and effective for small needs. 
So, what I trying to do is crop the QR code so that its looks fit. 
An example is below:

URL:
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8" title="Link to Google.com" />

As in above example you see it contain the the padding(spaces) is quite large from the edges of the QR-image. What I want is to remove(cropout) these space from the edges of the image so that it look like an example below:

bootstrap:
   <tr>
         <th>QR Code</th>
          <td  class ="text-left">
          <img class="img-thumbnail img-responsive" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8" title="Link to Google.com" />

            </td>

   </tr>

output:

Goal:

Yes I know QR-generator Libraries would be the better option here but my main focus is on charts.googleapis if anyone give a direction or suggestion that would be a great help.

A:

To fit what you need play with the value of background-size and background-position to adjust it :
.img-thumbnail{
  background: url('https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8');
  height: 200px;
  width: 200px;
  background-size: 135% 140%;
  border: 1px solid black;
  background-position: 50% 50%;
}

Try this fiddle : https://jsfiddle.net/hr8ak91o/

