Как обрезать изображение QR-кода GoogleAPI в Bootstrap?

Question

Как все мы знаем, Google предоставляет бесплатный API с именем: developer.google.com

, но у этого API есть некоторые ограничения, которые мы не можем настроить в соответствии с нами.но это просто и эффективно для небольших нужд.Итак, я пытаюсь обрезать QR-код, чтобы он выглядел хорошо.

Ниже приведен пример:

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" />

Как в приведенном выше примере вы видите, что отступы (пробелы) довольно велики от краев QR-изображения.Я хочу удалить (обрезать) это пространство по краям изображения, чтобы оно выглядело как пример ниже :

начальная загрузка:

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

выход:

Цель:

Да, я знаю, что QR-генератор здесь был бы лучшим вариантом, но мой основной упор сделан на charts.googleapisесли кто-нибудь даст направление или предложение, это будет очень полезно.

Answer 1

Чтобы соответствовать тому, что вам нужно, поиграйте со значениями background-size и background-position, чтобы настроить его:

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

Попробуйте эту скрипку: https://jsfiddle.net/hr8ak91o/