javascript - Tumblr:单击时显示全尺寸图像的代码

Question

我安装了一个新的 Tumblr 主题，发现如果我点击发布的图片，它永远不会显示完整尺寸的图片。

问题

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

期待

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

我认为解决方案是这部分代码中的一些选项。

---

/* 一般 */

        #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;
        }
        

Answer 1

尝试改下溢出

 #content .post { 
   ....
 } 

从隐藏到可见。如果你查看 w3schools 上的 CSS overflow 属性，它会对此进行更多解释。那可能是问题所在!希望有所帮助。