Tumblr:点击图片时显示全尺寸图片的代码



我已经安装了一个新的Tumblr主题,并且注意到如果我点击发布的图片,它永远不会显示完整尺寸的图片。

问题

首先点击图片-显示挑选出来的帖子。正常大小的图像。第二次点击单选模式-只是重新加载页面。

期望

首先点击图像-加载原始的全尺寸图像没有任何样式(只是普通的图像,所以它可以被查看/下载)

我认为解决方案是在这部分代码中的某个选项。


/* GENERAL */

        #infscr-loading {
            display: none;
            opacity: 0; 
        } 
    
        #content {
            width: 850px; 
            height: 100%; 
            position: relative;
            left: 5%; 
            margin-left: 350px; 
            font-family: {font:Text}; 
            {block:ifRightSidebar}
            margin-left:  -450px; 
            {/block:ifRightSidebar}
      
            margin-top: 81px; 
      
        }
        
        #content a{
            color: #000; /* color:Link */
            text-decoration: none;
            border-bottom: 1px solid rgba(100, 100, 100, 0.2);
        }
        #description a {
            color: {color:Description}; /* color:Link */
            text-decoration: underline;
        }
        
        #overlayer {
            position: fixed;
            z-index: -1;
            top: 0px;
            height: 100%; 
            background-color: #FFF; 
            padding-left: 20px; 
            padding-right: 20px; 
            left: calc(50% - {select:Content Size}/2 - 20px); 
            width: {select:Content Size};
        }
        
        /* GENERAL POST */ 
        
        #content .post {
            background: #EFB576; /* color:Post Background */
            color: {color:Text}; /* color:Text */ 
            width: 100%; 
            word-wrap: break-word;
            overflow: hidden; 
            position: relative;
            font-size: {select:Text Size} /* select:Font Size */;
            padding: 14px; 
            padding-bottom: 50px; 
            margin-top: 60px;
            margin-bottom: 60px; 
            {block:PermalinkPage}
            width: 470px !important;
            position: relative !important;
            left: 50% !important;
            margin-left: -250px !important; 
            margin-top: 0px !important;
            padding: 15px !important;
            {/block:PermalinkPage}
        }
        
        #content .post blockquote {
            display: block; 
            -webkit-margin-before: 5px !important;
            -webkit-margin-after: 5px !important;
            -webkit-margin-start: 8px !important;
            -webkit-margin-end: 8px !important;
            border-left: 3px solid rgb(230, 230, 230);
            padding-left: 10px; 
            top: 3px; 
            position: relative;
        }
        
        #content .post a{
            color: {color:Link}; /* color:Link */
            text-decoration: none;
            border-bottom: 1px solid rgba(100, 100, 100, 0.2);
        }
        
        #content .post img {
            height: auto;
            width: auto;
            position: relative;
            display: block;
        }
        

尝试更改

下的溢出
 #content .post { 
   ....
 } 

从隐藏变为可见。如果你看一下w3schools上的CSS溢出属性,它会解释更多。这可能就是问题所在!希望这对你有所帮助。

最新更新