Миниатюры отображаются увеличенным, но имеют ширину и высоту 150

Question

Моя проблема заключается в том, что я хочу построить и инстаграмировать фид в одной строке и 8 столбцах, в запросе все прошло хорошо, но хотя изображения, возвращаемые инстаграмом, имеют размер 150 * 150, они отображаются намного больше.

Вы можете увидеть это здесь: http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php

Я установил атрибут ширины и высоты в своем теге html img.

Когда я открываю инструменты разработчика в Chrome, он отображаетЧто ж.Что может вызвать это?

Вот мой код:

    function getInstagramFeed() {


    $.get("https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS_TOKEN", function( data ) {
      for (var i = 0; i != 8; i++) {
        console.log(data);
        $("#footer-instagram").append("<div class='item'>" +
          "<div class='single-instagram'>" +
            "<a href='" + data.data[i].link + "'>" +
              "<img src='" + data.data[i].images.thumbnail.url + "' style='width:100%;height:100%' alt=''>" +
            "</a>" +
            "<div class='insta-overlay'>" +
              "<div class='insta-meta'>" +
                "<ul class='list-inline text-center'>" +
                   "<li><a href='" + data.data[i].link + "'><i class='fa fa-heart-o'></i></a> " + data.data[i].likes.count + "</li>" +
                   "<li><a href='" + data.data[i].link + "'><i class='fa fa-comment-o'></i></a> " + data.data[i].comments.count + "</li>" +
                "</ul>" +
               "</div>" +
             "</div>" +
             "<a href='" + data.data[i].link + "' class='insta-link'></a>" +
           "</div>" +
         "</div>");
   }
 });
}
getInstagramFeed();

Любая помощь будет приветствоваться, спасибо всем, кто прочитает / ответит на это.

Answer 1

Я не знаю, как это будет выглядеть, но это может сработать:

.fa fa-heart-o, .fa fa-comment-o {
    width:50px;
    height:50px;
}

Или вы можете сделать это следующим образом:

.fa fa-heart-o,
.fa fa-comment-o {
    width:50px;
    height:50px;
}

Также я предлагаю вам использовать_ вместо ' ', потому что иногда это не сработает.

Или, если вам не нужно беспокоиться о других изображениях, которые вы можете использовать:

img{
    width:50px;
    height:50px;
}