title: tumblr image resize - width auto
body: <p><a href="http://wmmmd.tumblr.com/" rel="nofollow">http://wmmmd.tumblr.com/</a></p>
  
  <p>^theres the site. </p>
  
  <p><a href="http://www.tumblr.com/docs/en/custom_themes#posts" rel="nofollow">http://www.tumblr.com/docs/en/custom_themes#posts</a> &lt; --Heres the documentation</p>
  
  <p>question: </p>
  
  <p>Ok so if you go to the link and click on a photo post (not a photoset, but an indivual photo) I have made a lil lightbox for it. </p>
  
  <p><strong>Why can't i get the width of the image to scale proportional to the top. Basically I am trying to have every image fit on the screen, all the time, with enough room at the bottom, for the X, the caption, and that line of text... any thoughts?</strong> </p>
  
  <p>theres the code --> </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;{Title}&lt;/title&gt;
          &lt;divnk rel="shortcut icon" href="{Favicon}"&gt;
          &lt;divnk rel="alternate" type="appdivcation/rss+xml" href="{RSS}"&gt;
  
        &lt;link href='http://fonts.googleapis.com/css?family=Signika:400,300' rel='stylesheet' type='text/css'&gt;
           &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  
          &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'&gt;
  
  
          {block:Description}
              &lt;meta name="description" content="{MetaDescription}" /&gt;
          {/block:Description}
  
  
  
          &lt;/script&gt;
  
  
  
          &lt;style&gt;
  
  
  
  
             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 {
  
  
                  }
  
  
  
          &lt;/style&gt;
  
          &lt;script&gt;
  
          $('.floattyh2').click(function(){
          $('.hider_seeker').toggle('slow');
          })
  
  
     /*     $("postcontainer").parent(".post").css("background", "yellow");
      */ 
  
      &lt;/script&gt;
  
  
          &lt;style&gt;
  
  
          .postcontainer {
  
             /* 
            transform: scale(.2,.2);
  -ms-transform: scale(.2,.2); 
  -webkit-transform: scale(.2,.2);  */
  
  
  
              }
  
  
  
  
  
          &lt;/style&gt;
  
  
  
      &lt;/head&gt;
      &lt;!-- Start of Tumblrbox Code --&gt;
  
  
      &lt;body&gt;
      &lt;div class="floattyh"&gt;
  &lt;h2&gt;
  &lt;a href="http://en.wikipedia.org/wiki/Anaglyph_3D" target="_blank"&gt;What's an anaglyph?&lt;/a&gt;
  &lt;/h2&gt;
  &lt;/div&gt;
    &lt;div class="floattyh2"&gt;
  &lt;h2&gt;
  &lt;span onclick="$('.hider_seeker').show('slow'); window.scrollTo(1, 300);;"&gt;About this stuff.&lt;/span&gt;
  &lt;/h2&gt;
  &lt;/div&gt;
  
      &lt;div class='the_head'&gt;
          &lt;h1&gt;THE ASTONISHING 3D ART OF&lt;BR&gt; WILL DELPHIA&lt;br&gt;&lt;br&gt;&lt;/h1&gt;
  
  
  &lt;div class="hider_seeker scaled"&gt;
          {block:Description}
              &lt;p id="description"&gt;{Description}&lt;/p&gt;
          {/block:Description}
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="posts" class="row"&gt;
              {block:Posts}
                  {block:Text}
                      &lt;div class="post text col-lg-3"&gt;
                          {block:Title}
                              &lt;h3&gt;&lt;a href="{Permadivnk}"&gt;{Title}&lt;/a&gt;&lt;/h3&gt;
                          {/block:Title}
  
                          {Body}
                      &lt;/div&gt;
                  {/block:Text}
  
  
  &lt;style&gt;
  .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;
  
  
  
      }
  
  &lt;/style&gt;
  
  
  
                                                  {block:Photo}
                                                      &lt;div class="post photo col-lg-3"&gt;
                                                                      &lt;div class="postcontainer"&gt;
  
                                                         &lt;img class="griddy"  src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/&gt;
  
                                                         &lt;script&gt;
                                                         $(".griddy").click(function(){
                                                            $(this).siblings(".photo_thatis_hover").show();
                                                            $(this).siblings(".the-black-back").show();
  
  
                                                         });
                                               &lt;/script&gt;
  
  
  
                                                         &lt;div class="the-black-back"&gt;&lt;/div&gt;
  
  
                                                         &lt;div style="display:none" class="photo_thatis_hover" &gt;
  
  
                                                        &lt;img  class="theimage"  height="500px" width="" src="{PhotoURL-500}" alt="{PhotoAlt}"/&gt; 
  
                                                         &lt;p align="center"&gt;&lt;div class="closeit"&gt;X&lt;/div&gt;&lt;br&gt;&lt;br&gt;
                                                           {block:Caption}
                                                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                                                          {/block:Caption}
                                                         &lt;br&gt;&lt;span style="font-size: 10px"&gt;want to order prints of this photo? contact me at willdelphia (at) gmail...&lt;/span&gt;&lt;/p&gt;
  
                                                          &lt;script&gt;
  
                                                           $(".closeit").click(function(){
  
                                                            $(".photo_thatis_hover").hide();
                                                            $(".the-black-back").hide();
  
  
                                                         });
  
                                                             $(".the-black-back").click(function(){
                                                                 $(".photo_thatis_hover").hide();
                                                                 $(".the-black-back").hide();
  
  
                                                         });
  
                                                         &lt;/script&gt;
  
                                                         &lt;/div&gt;
  
                                                          {block:Caption}
                                                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                                                          {/block:Caption}
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  {/block:Photo}
  
  
  
  
  
  
  
  
                  {block:Panorama}
  
                      &lt;div class="post panorama col-lg-3"&gt;
                                                      &lt;div class="postcontainer"&gt;
  
                          {divnkOpenTag}
                              &lt;img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/&gt;
                          {divnkCloseTag}
  
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {/block:Panorama}
  
  
   {block:Photoset}
                      &lt;li class="post photoset"&gt;
                          {Photoset-250}
  
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption} {ReblogButton size="20"}
                      &lt;/li&gt;
                  {/block:Photoset}
  
  
  
                  {block:Quote}
  
                      &lt;div class="post quote col-lg-3"&gt;
                                                      &lt;div class="postcontainer"&gt;
  
                          "{Quote}"
  
                          {block:Source}
                              &lt;div class="source"&gt;{Source}&lt;/div&gt;
                          {/block:Source}
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {/block:Quote}
  
                  {block:divnk}
  
  
                      &lt;div class="post divnk col-lg-3"&gt;
                           &lt;div class="postcontainer"&gt;
                          &lt;a href="{URL}" class="divnk" {Target}&gt;{Name}&lt;/a&gt;
  
                          {block:Description}
                              &lt;div class="description"&gt;{Description}&lt;/div&gt;
                          {/block:Description}
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {/block:divnk}
  
                  {block:Chat}
                      &lt;div class="post chat col-lg-3"&gt;
                          {block:Title}
                              &lt;h3&gt;&lt;a href="{Permadivnk}"&gt;{Title}&lt;/a&gt;&lt;/h3&gt;
                          {/block:Title}
  
                          &lt;ul class="chat"&gt;
                              {block:divnes}
                                  &lt;div class="{Alt} user_{UserNumber}"&gt;
                                      {block:Label}
                                          &lt;span class="label"&gt;{Label}&lt;/span&gt;
                                      {/block:Label}
  
                                      {divne}
                                  &lt;/div&gt;
                              {/block:divnes}
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  {/block:Chat}
  
                  {block:Video}
  
                      &lt;div class="post video col-lg-3"&gt;
                                                      &lt;div class="postcontainer"&gt;
  
                          {Video-500}
  
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {/block:Video}
  
                  {block:Audio}
  
                      &lt;div class="post audio col-lg-3"&gt;
                                                      &lt;div class="postcontainer"&gt;
  
                          {AudioPlayerBlack}
  
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {/block:Audio}
              {/block:Posts}
          &lt;/div&gt;
  
          &lt;div class="transportleft"&gt;
  
             {block:PreviousPage}
  &lt;h2&gt;   &lt;a href="{PreviousPage}"&gt;&amp;#171; Previous&lt;/a&gt;&lt;/h2&gt;            {/block:PreviousPage}
          &lt;/div&gt;
  
  &lt;div class="transport"&gt;
  
  
  
  
  
              {block:NextPage}
                    &lt;h2&gt;  &lt;a href="{NextPage}"&gt;Next &amp;#187;&lt;/a&gt; &lt;/h2&gt;
              {/block:NextPage}
  
  
  
  &lt;/div&gt;
  
  
  
  
          &lt;div id="footer"&gt;
              {block:PreviousPage}
  
              {/block:PreviousPage}
  
              {block:NextPage}
              {/block:NextPage}
  
              &lt;a href="/archive"&gt;Archive&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;style&gt;
  
          .scootch {
  
           left: -120px; 
  
          }
  
          &lt;/style&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>