Question

在我的Tumblr博客上，我不明白为什么Photoset中的图像会被剪切掉，所以我们无法看到它们的高度。

例如，一张图片的宽度为700px，高度为394px，但我们看到的是700px宽度和383px高度，因此缺少11px！

这是页面：
http://www.scarabeearchitecture.fr/

这是照片和照片集的CSS：

.posts {
     width: 100%;
     max-width: 1024px;
     margin: 0 auto 48px;
     background: rgba(0, 0, 0, 0.0);
     padding: 0px 0 0;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
     -ms-border-radius: 3px;
     border-radius: 3px;
 }

 .posts_inner {
     width: 100%;
     max-width: 700px;
     margin: 0 auto;
     padding-bottom: 26px;
     word-break: break-word;
 }

 .chat .posts_inner,
 .link .posts_inner {
     width: 87%;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .audio_inner {
     overflow: hidden;
 }

 .photo .posts_inner,
 .video .posts_inner,
 .audio .posts_inner,
 .quote .posts_inner,
 .link .posts_inner {
     width: 100%!important;
     max-width: 1024px!important;
     margin-left: auto;
     margin-right: auto;
 }

 .photo .posts_inner .date,
 .video .posts_inner .date,
 .audio .posts_inner .date,
 .quote .posts_inner .date,
 .link .posts_inner .date,
 ul.tags {
     width: 100%!important;
     margin-left: auto;
     margin-right: auto;
 }

 #permalinkpage .posts_inner p {
     margin-left: auto;
     margin-right: auto;
 }

 .photoset-grid-lightbox_outer,
 .video-grid-lightbox_outer,
 .audio-grid-lightbox_outer,
 .quote-grid-lightbox_outer,
 .link-grid-lightbox_outer,
 .video-container {
     margin-top: 34px;
 }

 .quote_outer {
     color: #f2f2f2;
     text-shadow: none;
     font-style: italic;
 }

 .chat_outer {
     margin-top: 16px;
 }

 .link_outer {
     color: #f2f2f2;
     text-align: center;
     text-shadow: none;
 }

 .link_outer h2 {
     padding-bottom: 0!important;
     border-bottom: none!important;
 }

 .link_outer h2 a {
     font-size: 24px!important;
     font-weight: normal!important;
     color: #f2f2f2!important;
 }

 .link_outer a {
     color: #999999!important;
     font-size: 14px!important;
 }

 .link {
     padding-top: 22px;
 }

 .photoset-grid-lightbox_outer {
     padding: 0px;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
 }

 .video-grid-lightbox_outer {
     padding: 3px 38px 38px;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
 }

 .audio-grid-lightbox_outer,
 .quote-grid-lightbox_outer {
     padding: 38px;
     overflow: hidden;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
 }

 .link-grid-lightbox_outer {
     padding: 44px 38px 58px 38px;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     -o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
     box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
 }

 .photoset-grid-lightbox,
 .photopost,
 .video-container {
     position: relative;
     z-index: 50;
     -webkit-box-shadow: 0 1px 20px gray;
     -moz-box-shadow: 0 1px 20px gray;
     -ms-box-shadow: 0 1px 20px gray;
     -o-box-shadow: 0 1px 20px gray;
     box-shadow: 0 1px 20px gray;
     background: #000000;
 }

 .photoset-grid-lightbox:before,
 .photopost:before,
 .video-container:before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     left: 1px;
     z-index: 100;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .photoset-grid-lightbox:after,
 .photopost:after,
 .video-container:after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 100;
     border-left: 1px solid rgba(255, 255, 255, 0.1);
 }

 .posts h2,
 #permalinkpage h2 {
     font-size: 28px;
     padding-bottom: 18px;
     border-bottom: solid 2px rgba(0,0,0,0.04);
 }

 .posts h2 a {
   color: #333333;
   font-size: 28px;
 }

 .sp_show {
     display: none;
 }

 .posts p,
 #permalinkpage p {
     margin: 30px 0 30px;
     font-size: 14px;
 }

 @media screen and (max-width : 768px){
     .posts {
         padding: 24px 0 0;
     }

     .posts_inner {
         width: 87%;
         margin-left: auto;
         margin-right: auto;
     }

     .photo .posts_inner,
     .video .posts_inner {
         width: 95%;
     }

     .photoset-grid-lightbox_outer,
     .video-grid-lightbox_outer,
     .audio-grid-lightbox_outer,
     .quote-grid-lightbox_outer,
     .link-grid-lightbox_outer,
     .video-container {
         margin-top: 24px;
     }

     .video-grid-lightbox_outer {
         padding: 13px 38px 38px;
     }

     .photo .posts_inner .date,
     .video .posts_inner .date {
         width: 92%;
         margin-left: auto;
         margin-right: auto;
     }

     .posts p,
     #permalinkpage p { 
         font-size: 1.6rem;
     }
 }

 @media screen and (max-width : 480px){
     .photoset-grid-lightbox_outer,
     .audio-grid-lightbox_outer,
     .video-grid-lightbox_outer {
         padding: 0;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         -o-box-shadow: none;
         -ms-box-shadow: none;
         box-shadow: none;
         background: none;
     }

     .photoset-grid-lightbox,
     .photopost,
     .video-container {
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         -o-box-shadow: none;
         -ms-box-shadow: none;
         box-shadow: none;
     }

     .audio-grid-lightbox_outer {
         width: 87%;
         margin-left: auto;
         margin-right: auto;
     }

     .pc_show {
         display: none;
     }

     .sp_show {
         display: inline;
     }

     .spotify_audio_player {
         max-width: 100%!important;
         height: 80px!important;
     }
 }

 .posts div.date a,
 .posts div.date,
 #permalinkpage div.date a,
 #permalinkpage div.date {
   color: #999999;
   font-size: 12px;
   font-weight: bold;
 }

 .posts div.date a:hover {
   color: #006bd5;
 }

 .posts p.date {
   margin-bottom: 6px;
   text-align: right;
   color: #999999;
   font-size: 12px;
 }

 .posts p.date a {
   color: #999999;
 }

 .caption {
     width: 100%;
     margin: 35px auto 0;
 }

 .posts .link {
   font-size: 12px;
 }

enter image description here

在我的Tumblr博客上剪切了图片

0 个答案: