html - 缩略图显示为已缩放，但宽度和高度为150

Question

我的问题是我想建立一个instagram并在第一行和8列中进行订阅的应用程序，一切都按要求进行了，但是，即使instagram返回的图像尺寸为150 * 150，但它们显示的要大得多。

您可以在这里看到此内容：http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php

我在html img标签中设置了width和height属性。

当我在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;
}