如何使我的博客作者的instagram feed图片具有原始大小而不是正方形?

如何解决如何使我的博客作者的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("<","&lt;")).replace(/"(.+?)"/g,'<span data-type="val">"$1"</span>');for(var a=0;a<tags.length;a++)t=(t=t.replace(new RegExp("&lt;"+tags[a],'&lt;<span data-type="tag">'+tags[a]+"</span>")).replace(new RegExp("&lt;/"+tags[a],'&lt;/<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>>(.*)&lt;/,'span>><span data-type="plain">$1</span>&lt;')}$(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 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-