如何解决如何使我的博客作者的instagram feed图片具有原始大小而不是正方形?
我的博客网站上有用于Instagram的这段代码,
<style> .playground2 .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground2 .result .posts{position:relative;display:block;margin:0;width:16.666%;overflow:hidden}.playground2 .result .posts img{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.playground2 .result .posts .meta{position:absolute;right:0;bottom:0;display:block;width:100%;height:100%;color:#fff;font-size:15px;text-decoration:none;background: rgba(64,64,.7);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0;line-height:1.4}.playground2 .result .posts:hover .meta{opacity:0.7; background: rgba(64,.7)}.playground2 .result .posts .meta p{margin:0 0 20px;opacity:0;visibility:hidden;-webkit-transition:all .5s ease;transition:all .5s ease}.playground2 .result .posts .stats{position:absolute;width:100%;right:0;top:50%; overflow:hidden;opacity:0;text-align:center;color:#fff;-webkit-transform:translate(0,-50%) }.playground2 .result .posts .stats i{margin:0 0 0 10px}.playground2 .result .posts .stats .likes{display:block;margin:0}.playground2 .result .posts .stats .comment{display:block;margin:0}.playground2 .result .posts::after{display:block;padding-top:100%;content:''}.playground2 .result .posts:hover .stats {opacity:1;visibility:visible}}@media only screen and (max-width:767px){#instafeed-footer .instathumb{flex-basis:25%}.playground .result .posts{width:49%}.playground2 .result .posts{width:25%}} </style> <script> /*<![CDATA[*/ !function(e){e.fn.instastory=function(t){let s=this,n="",o=e.extend({get:"",type:"",imageSize:640,limit:6,link:!0,template:"",after:function(){}},t);if(!s.length)return console.group("Instastory.js log"),console.warn("The DOM element you tried to initiate the plugin on,does not exist"),console.log("For more info on how to use the plugin,please see: https://github.com/kasperlegarth/instastory.js"),console.groupEnd(),!1;if("string"==typeof t&&(o.get=t),""==o.get)return console.group("Instastory.js log"),console.warn("You failed to specify what you want"),!1;const r=function(e){const t=o.imageSize;if("number"!=typeof t)return"raw"==t?e.display_url:e.thumbnail_resources[0].src;switch(t){case 150:return e.thumbnail_resources[0].src;case 240:return e.thumbnail_resources[1].src;case 320:return e.thumbnail_resources[2].src;case 480:return e.thumbnail_resources[3].src;case 640:return e.thumbnail_resources[4].src;default:return e.thumbnail_resources[0].src}},a=function(e){String.prototype.allReplace=function(e){let t=this;for(let s in e)t=t.replace(new RegExp(s,"g"),e[s]);return t};let t={"{{accessibility_caption}}":e.accessibility_caption,"{{caption}}":e.edge_media_to_caption.edges.length>0?e.edge_media_to_caption.edges[0].node.text:"","{{comments}}":e.edge_media_to_comment.count,"{{image}}":r(e),"{{likes}}":e.edge_liked_by.count,"{{link}}":"https://www.instagram.com/p/"+e.shortcode};return o.template.allReplace(t)};var i,c;(i=o.get).indexOf("@")>-1?(o.type="user",o.get=i.substring(i.indexOf("@")+1)):i.indexOf("#")>-1?(o.type="hashtag",o.get=i.substring(i.indexOf("#")+1)):(o.type="hashtag",o.get=i),c=o.type,n="user"==c?"https://www.instagram.com/"+o.get+"/?__a=1":"https://www.instagram.com/explore/tags/"+o.get+"/?__a=1",e.ajax({url:n,success:function(e){s.html(function(e){let t="",s={};switch(o.type){case"user":s=e.edge_owner_to_timeline_media;break;default:s=e.edge_hashtag_to_media}let n=s.edges;for(var i=0;i<o.limit;i++)if(void 0!==n[i]){let e=n[i].node,s="";""!=o.template?s=a(e):(s="<img src='"+r(e)+"' alt='"+e.accessibility_caption+"'>",o.link&&(s="<a href='https://www.instagram.com/p/"+e.shortcode+"'>"+s+"</a>")),t+=s}return t}(e.graphql[o.type])),o.after()}}).fail(function(e){switch(e.status){case 404:console.warn("The "+o.type+" do not exsists,please try another one");break;default:console.warn("An unknow error happend")}})}}(jQuery); /*]]>*/ </script>
<!-- Instagram Footer Widget --> <script type="text/javascript"> var tags=["div","a","button","article","section","strong","i","input","script"],attr=["class","src","href"];function highlight(t){t=(t=t.replace(new RegExp("<","<")).replace(/"(.+?)"/g,'<span data-type="val">"$1"</span>');for(var a=0;a<tags.length;a++)t=(t=t.replace(new RegExp("<"+tags[a],'<<span data-type="tag">'+tags[a]+"</span>")).replace(new RegExp("</"+tags[a],'</<span data-type="tag">'+tags[a]+"</span>");for(a=0;a<attr.length;a++)t=t.replace(new RegExp(attr[a],'<span data-type="attr">'+attr[a]+"</span>");return t=t.replace(/span>>(.*)</,'span>><span data-type="plain">$1</span><')}$(document).ready(function(){$(".highlight-me").each(function(){$(this).html(highlight($(this).html()))}),$("#demo1").instastory("#coding"); let t={ get:"@cena1web",template:'<div class="posts"><a target="_blank" href="{{link}}"><img src="{{image}}" alt="{{accessibility_caption}}"><span class="meta"></span><span class="stats"><span class="likes"><i class="fa fa-heart"></i>{{likes}}</span><span class="comment"><i class="fa fa-comment"></i>{{comments}}</span></a></div>'};$("#playground2-result").instastory(t),setTimeout(function(){$("#playground2-result .posts").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>350&&(a=t.substring(0,347)+"..."),$(this).find(".meta p").text(a)})},2e3),$("#new-feed").click(function(){let a=$("#hashtag-input").val(),e=$("#limit-input").val();""!==a&&(t.get=a),""!==e&&(t.limit=e),$("#playground2-result").instastory(t),a=t;t.length>390&&(a=t.substring(0,387)+"..."),2e3)})}); </script> <div class="playground2"><div id="playground2-result" class="result"></div></div>
但是当我将其添加到博客中时,图片在博客页面上以正方形显示,如下图: enter image description here 我想修改代码,以使图像以原始尺寸显示在Blogger页面上,而不是正方形(已裁剪),例如这张照片: enter image description here
请帮助...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。