Thumbnails display zoomed but are 150 of width and height
My issue is that I want to build and instagram feed in one row and 8 columns, everything went well in the request, but even though the images returned by instagram are 150*150, they are displaying much bigger.
You can see this here: http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php
I setted width and height attribute in my html img tag.
When I open the developer tools in Chrome, it displays well. What can cause this ?
Here is my code:
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();
Any help would be welcome, thanks to anyone who will read/answer this.
html css twitter-bootstrap bootstrap-4
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
add a comment |
My issue is that I want to build and instagram feed in one row and 8 columns, everything went well in the request, but even though the images returned by instagram are 150*150, they are displaying much bigger.
You can see this here: http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php
I setted width and height attribute in my html img tag.
When I open the developer tools in Chrome, it displays well. What can cause this ?
Here is my code:
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();
Any help would be welcome, thanks to anyone who will read/answer this.
html css twitter-bootstrap bootstrap-4
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
add a comment |
My issue is that I want to build and instagram feed in one row and 8 columns, everything went well in the request, but even though the images returned by instagram are 150*150, they are displaying much bigger.
You can see this here: http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php
I setted width and height attribute in my html img tag.
When I open the developer tools in Chrome, it displays well. What can cause this ?
Here is my code:
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();
Any help would be welcome, thanks to anyone who will read/answer this.
html css twitter-bootstrap bootstrap-4
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
My issue is that I want to build and instagram feed in one row and 8 columns, everything went well in the request, but even though the images returned by instagram are 150*150, they are displaying much bigger.
You can see this here: http://kaleidoventure.info/kotha-pro-normal-css/archive-cat.php
I setted width and height attribute in my html img tag.
When I open the developer tools in Chrome, it displays well. What can cause this ?
Here is my code:
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();
Any help would be welcome, thanks to anyone who will read/answer this.
html css twitter-bootstrap bootstrap-4
html css twitter-bootstrap bootstrap-4
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
edited Nov 20 '18 at 22:12
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
asked Nov 20 '18 at 19:07
Pierrick Martellière
445722
445722
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I don't know what that would look like but this might work:
.fa fa-heart-o, .fa fa-comment-o {
width:50px;
height:50px;
}
Or you can do it this way:
.fa fa-heart-o,
.fa fa-comment-o {
width:50px;
height:50px;
}
Also I suggest that you use _ instead of ' ' because sometimes it won't work.
Or if you don't have to worry about other images you can use:
img{
width:50px;
height:50px;
}
answered Nov 20 '18 at 19:56
freddybobjo
36
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399893%2fthumbnails-display-zoomed-but-are-150-of-width-and-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I don't know what that would look like but this might work:
.fa fa-heart-o, .fa fa-comment-o {
width:50px;
height:50px;
}
Or you can do it this way:
.fa fa-heart-o,
.fa fa-comment-o {
width:50px;
height:50px;
}
Also I suggest that you use _ instead of ' ' because sometimes it won't work.
Or if you don't have to worry about other images you can use:
img{
width:50px;
height:50px;
}
answered Nov 20 '18 at 19:56
freddybobjo
36
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
|
show 4 more comments
I don't know what that would look like but this might work:
.fa fa-heart-o, .fa fa-comment-o {
width:50px;
height:50px;
}
Or you can do it this way:
.fa fa-heart-o,
.fa fa-comment-o {
width:50px;
height:50px;
}
Also I suggest that you use _ instead of ' ' because sometimes it won't work.
Or if you don't have to worry about other images you can use:
img{
width:50px;
height:50px;
}
answered Nov 20 '18 at 19:56
freddybobjo
36
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
|
show 4 more comments
I don't know what that would look like but this might work:
.fa fa-heart-o, .fa fa-comment-o {
width:50px;
height:50px;
}
Or you can do it this way:
.fa fa-heart-o,
.fa fa-comment-o {
width:50px;
height:50px;
}
Also I suggest that you use _ instead of ' ' because sometimes it won't work.
Or if you don't have to worry about other images you can use:
img{
width:50px;
height:50px;
}
answered Nov 20 '18 at 19:56
freddybobjo
36
I don't know what that would look like but this might work:
.fa fa-heart-o, .fa fa-comment-o {
width:50px;
height:50px;
}
Or you can do it this way:
.fa fa-heart-o,
.fa fa-comment-o {
width:50px;
height:50px;
}
Also I suggest that you use _ instead of ' ' because sometimes it won't work.
Or if you don't have to worry about other images you can use:
img{
width:50px;
height:50px;
}
answered Nov 20 '18 at 19:56
freddybobjo
36
edited Nov 21 '18 at 15:48
answered Nov 20 '18 at 19:56
freddybobjo
36
answered Nov 20 '18 at 19:56
freddybobjo
36
answered Nov 20 '18 at 19:56
freddybobjo
36
36
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
|
show 4 more comments
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
Hi, thanks for your answer. What do you mean by usign _ instead of ' ' ? Thanks in advance.
– Pierrick Martellière
Nov 20 '18 at 21:00
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
You're solution about setting width and height of font awesome icons si not working.
– Pierrick Martellière
Nov 20 '18 at 21:05
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I want the images to display correctly, the icons are well displayed.
– Pierrick Martellière
Nov 20 '18 at 23:03
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
I meant SPACE by ' '
– freddybobjo
Nov 21 '18 at 15:45
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
Where should I use '_' ? Please be more specific. Also, if you see my original post, I already set width and height on my html img attribute.
– Pierrick Martellière
Nov 21 '18 at 16:16
|
show 4 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399893%2fthumbnails-display-zoomed-but-are-150-of-width-and-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
