tumblr图像调整大小 - 宽度自动

时间:2013-08-08 16:54:37

标签: css image resize lightbox tumblr

http://wmmmd.tumblr.com/

^ theres网站。

http://www.tumblr.com/docs/en/custom_themes#posts< - 这是文件

问题:

好的,如果你去链接点击一个照片贴(不是一张照片,而是一张不同的照片),我已经为它做了一个小灯箱。

为什么我不能让图像的宽度与顶部成比例。基本上我试图让每个图像都适合屏幕,一直在底部有足够的空间,X,标题和那行文字......任何想法?

theres the code - >

<html>
    <head>
        <title>{Title}</title>
        <divnk rel="shortcut icon" href="{Favicon}">
        <divnk rel="alternate" type="appdivcation/rss+xml" href="{RSS}">

      <link href='http://fonts.googleapis.com/css?family=Signika:400,300' rel='stylesheet' type='text/css'>
         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>


        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}



        </script>



        <style>




           body {
                color:#A9D6D9;
font-family: 'Signika', sans-serif;
        background: url(http://i.imgur.com/Obc50Hk.jpg);
                background-size: 100%;

             font-family: 'Quicksand', sans-serif;
            }

            h1 {
                font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
            }

            h2, .attribution-tags {
               font-family: 'Quicksand', sans-serif;
            }


.sub-title {
    width: 100%;



    }
     h1 {
  color: cyan;
  font-size: 60px;
  font-weight: bold;
  text-shadow: #1abc9c 0 0 1px, 
               #19B394 0 4px 3px, 
               #1AAD90 0 5px 3px,  
               #16a085 0 5px 1px, 
               cyan -14px 1px 300px, 
               cyan -16px 1px 300px,
               cyan -22px 2px 300px;

  transition: all 1s ease;
}

 h1:hover {
  color: white;
 text-shadow: #1abc9c 0 0 1px, 
               #19B394 0 4px 3px, 
               #1AAD90 0 5px 3px,  
               #16a085 0 5px 1px, 
               cyan 5px 1px 1px, 
               cyan 6px 1px 1px,
               red -6px 2px 1px;
}


    .floattyh
{
    position: fixed;
    top:14px;
    right:-40px;
    opacity: .6;


            z-index:1000000000000;


    }

        .floattyh2
{
    position: fixed;
    top:94px;
    right:-40px;
        opacity: .6;
        z-index:1000000000000;





    }

    .floattyh:hover,  .floattyh2:hover {
        right:-30px;

        }


        .transport
{
    position: fixed;
    top:65%;
    right:-140px;    opacity: .6;

        z-index:1000000000000;




    }


    .transportleft

    {
    position: fixed;
    top:65%;
    left:-140px;    opacity: .6;
   text-align: right;
        z-index:1000000000000;




    }


    .footer, #footer {

     position: absolute;
     bottom:0px;
     width:100%;
     margin: auto;
     right: 70%;
         opacity: .6;


    }



.the_head {
    margin: auto:
    text-align: center;
 BACKGROUND: URL(http://i.imgur.com/0vf1t2M.jpg);
PADDING-TOP:200PX;   
padding-bottom: 30px;}

    .textualpleasure,  h1 {

        margin: auto;
        width: 100%;
        TEXT-ALIGN: CENTER;


        }


        .LEFT {

            MARGIN-LEFT:-10px;
            text-align: right;
            BACKGROUND: black;
            width: 70%;

          -webkit-border-radius: 44px;
            -moz-border-radius: 44px;
            border-radius: 44px;


         -webkit-border-bottom-left-radius: 0;
         -moz-border-bottom-left-radius: 0;
         -border-bottom-left: 0;

                  -webkit-border-top-left-radius: 0;
         -moz-border-top-left-radius: 0;
         -border-top-left: 0;

                   opacity: .5;

PADDING:35PX; 
box-shadow: inset 1px 3px 3px  cyan;

}

.RIGHT {
MARGIN-left:200px;
                   text-align: left;
                   opacity: .5;
            BACKGROUND: black;



              -webkit-border-radius:  44px;
            -moz-border-radius: 44px;
            border-radius: 44px;


         -webkit-border-bottom-right-radius: 0;
         -moz-border-bottom-right-radius: 0;
         -border-bottom-left: 0;

                  -webkit-border-top-right-radius: 0;
         -moz-border-top-right-radius: 0;
         -border-top-left: 0;




PADDING:35PX; 


box-shadow: inset 1px 3px 3px red;
}


            h1 a,
            .load-more,
            .exposed-nav-wrapper li a,
            .sub-title,
            .search-header {
                color: {TitleColor};
            }

            .h-line {
                background: {TitleColor};
            }

            a {
                color: {LinkColor};
            }

        body {

            MARGIN: AUTO;
            width:100%
        }

        #posts {
            margin: atuo;
        }   


        h2 {

                BACKGROUND: black;
         -webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
PADDING: 20PX; 
box-shadow: inset 3px 2px 0px red;
font-size: 20px;
            width: 300px;
            margin-top: 100px;
            margin: auto;


            }
         h2 a {color: white}

            .posts{



                margin-top:100px;
             text-align: center;


            } 

            .row {

    margin: auto;
    text-align: center;
    padding-left: 100px;

    }

        .post{ 



   background: white;

            width:300px;
            height: 300px;
            float: left;
            padding: 10px;
         overflow: hidden;

            margin:auto;
            /* 
            position: relative;


      text-align: center; 

      */

        }



        .post img,.caption {

   width:90%;


        }

        .griddy {


            width: 90%;
            margin: auto;


        }        




        .hider_seeker {
            display:none;


            }


            .clickit_boy {


                }



        </style>

        <script>

        $('.floattyh2').click(function(){
        $('.hider_seeker').toggle('slow');
        })


   /*     $("postcontainer").parent(".post").css("background", "yellow");
    */ 

    </script>


        <style>


        .postcontainer {

           /* 
          transform: scale(.2,.2);
-ms-transform: scale(.2,.2); 
-webkit-transform: scale(.2,.2);  */



            }





        </style>



    </head>
    <!-- Start of Tumblrbox Code -->


    <body>
    <div class="floattyh">
<h2>
<a href="http://en.wikipedia.org/wiki/Anaglyph_3D" target="_blank">What's an anaglyph?</a>
</h2>
</div>
  <div class="floattyh2">
<h2>
<span onclick="$('.hider_seeker').show('slow'); window.scrollTo(1, 300);;">About this stuff.</span>
</h2>
</div>

    <div class='the_head'>
        <h1>THE ASTONISHING 3D ART OF<BR> WILL DELPHIA<br><br></h1>


<div class="hider_seeker scaled">
        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}
        </div>
        </div>

        <div id="posts" class="row">
            {block:Posts}
                {block:Text}
                    <div class="post text col-lg-3">
                        {block:Title}
                            <h3><a href="{Permadivnk}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
                {/block:Text}


<style>
.photoset , .photo, .video, .Audio, .text, .quote {

    margin: 20px;
     -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

    }



    .photo_thatis_hover {
width:100%;
height: 80%;



              position: fixed;
        top: 0px;
        left:0px;
        display: block;
        padding-top: 200px;

     -moz-box-shadow:     0 12 10px #000000;
   -webkit-box-shadow:  0 12 10px #000000;
   box-shadow:          0 12 10px #000000;

        z-index: 10000000;
        text-align: center;
        }



    .the-black-back {
        display: none;
        position: fixed;
        top:0px;
        left:0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        z-index: 100;

    }

    .closeit {
        position: relative;
        background-color: black;
          -webkit-border-radius: 14px;
            -moz-border-radius: 14px;
            border-radius: 14px;
            z-index: 1000000000000000000000000000000000000000000000000000;
        font-size: 50px;
        text-align: center;
        padding: 20px;
        margin:auto;
        margin-top: -70px;
        margin-bottom: 5px;
        text-shadow: #1abc9c 0 0 1px, 
               #19B394 0 4px 3px, 
               #1AAD90 0 5px 3px,  
               #16a085 0 5px 1px, 
               cyan -14px 1px 300px, 
               cyan -16px 1px 300px,
               cyan -22px 2px 300px;

  transition: all 1s ease;
  width: 100px;
}
    .closeit:hover {
        position: relative;
        background-color: #33bfb3;
          -webkit-border-radius: 14px;
            -moz-border-radius: 14px;
            border-radius: 14px;
            z-index: 1000000000000000000000000000000000000000000000000000;
        font-size: 50px;
        text-align: center;
        padding: 20px;
        margin:auto;
        margin-top: -70px;
        margin-bottom: 5px;
        text-shadow: #1abc9c 0 0 1px, 
               #19B394 0 4px 3px, 
               #1AAD90 0 5px 3px,  
               #16a085 0 5px 1px, 
               cyan -14px 1px 300px, 
               cyan -16px 1px 300px,
               cyan -22px 2px 300px;

  transition: all 1s ease;
  width: 100px;
}

    }


    .griddy_up {
        margin: auto;


    }


    .theimage {

    margin: auto;



    }

</style>



                                                {block:Photo}
                                                    <div class="post photo col-lg-3">
                                                                    <div class="postcontainer">

                                                       <img class="griddy"  src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>

                                                       <script>
                                                       $(".griddy").click(function(){
                                                          $(this).siblings(".photo_thatis_hover").show();
                                                          $(this).siblings(".the-black-back").show();


                                                       });
                                             </script>



                                                       <div class="the-black-back"></div>


                                                       <div style="display:none" class="photo_thatis_hover" >


                                                      <img  class="theimage"  height="500px" width="" src="{PhotoURL-500}" alt="{PhotoAlt}"/> 

                                                       <p align="center"><div class="closeit">X</div><br><br>
                                                         {block:Caption}
                                                            <div class="caption">{Caption}</div>
                                                        {/block:Caption}
                                                       <br><span style="font-size: 10px">want to order prints of this photo? contact me at willdelphia (at) gmail...</span></p>

                                                        <script>

                                                         $(".closeit").click(function(){

                                                          $(".photo_thatis_hover").hide();
                                                          $(".the-black-back").hide();


                                                       });

                                                           $(".the-black-back").click(function(){
                                                               $(".photo_thatis_hover").hide();
                                                               $(".the-black-back").hide();


                                                       });

                                                       </script>

                                                       </div>

                                                        {block:Caption}
                                                            <div class="caption">{Caption}</div>
                                                        {/block:Caption}
                                                        </div>
                                                    </div>
                                                {/block:Photo}








                {block:Panorama}

                    <div class="post panorama col-lg-3">
                                                    <div class="postcontainer">

                        {divnkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {divnkCloseTag}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                    </div>
                {/block:Panorama}


 {block:Photoset}
                    <li class="post photoset">
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption} {ReblogButton size="20"}
                    </li>
                {/block:Photoset}



                {block:Quote}

                    <div class="post quote col-lg-3">
                                                    <div class="postcontainer">

                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                    </div>
                {/block:Quote}

                {block:divnk}


                    <div class="post divnk col-lg-3">
                         <div class="postcontainer">
                        <a href="{URL}" class="divnk" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                    </div>
                {/block:divnk}

                {block:Chat}
                    <div class="post chat col-lg-3">
                        {block:Title}
                            <h3><a href="{Permadivnk}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:divnes}
                                <div class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {divne}
                                </div>
                            {/block:divnes}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}

                    <div class="post video col-lg-3">
                                                    <div class="postcontainer">

                        {Video-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                    </div>
                {/block:Video}

                {block:Audio}

                    <div class="post audio col-lg-3">
                                                    <div class="postcontainer">

                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                    </div>
                {/block:Audio}
            {/block:Posts}
        </div>

        <div class="transportleft">

           {block:PreviousPage}
<h2>   <a href="{PreviousPage}">&#171; Previous</a></h2>            {/block:PreviousPage}
        </div>

<div class="transport">





            {block:NextPage}
                  <h2>  <a href="{NextPage}">Next &#187;</a> </h2>
            {/block:NextPage}



</div>




        <div id="footer">
            {block:PreviousPage}

            {/block:PreviousPage}

            {block:NextPage}
            {/block:NextPage}

            <a href="/archive">Archive</a>
        </div>


        <style>

        .scootch {

         left: -120px; 

        }

        </style>

    </body>
</html>

0 个答案:

没有答案