需要有灯箱缩略图来调整窗口缩小时的尺寸

我正在开发一个响应式投资组合，而且我的灯箱缩略图处于停滞状态。当浏览器宽度缩小时，我需要缩略图与网站的其他部分一起缩小，但目前它只是保持相同的大小。我不确定究竟该从哪里出发。任何帮助，将不胜感激！需要有灯箱缩略图来调整窗口缩小时的尺寸

链接到灯箱CSS文件：https://drive.google.com/folderview?id=0BxgeLB33TSvCUWFvSVZWNTVidDQ&usp=sharing

链接lightbox.js：https://drive.google.com/file/d/0BxgeLB33TSvCZUpYZG1TY3VXUjA/edit?usp=sharing

HTML：

<!DOCTYPE html> 
<html> 
    <head> 

     <title>Portofolio</title> 
      <script src="js/jquery-1.11.0.min.js"></script> 
      <script src="js/lightbox.min.js"></script> 
      </script> 
      <link href="css/lightbox.css" rel="stylesheet" /> 

     <link href="style.css" type="text/css" rel="stylesheet" /> 


</style> 


    </head> 
    <body> 
    <div id="wrapper"> 
     <div id="header"> 
     <div id="logo"> 
     <h1><a href="">NAME</a></h1> 
     </div> 
      <div id="nav"> 

       <ul> 
        <li><a href="">HOME</a></li> 
        <li><a href="">ABOUT</a></li> 
        <li><a href="">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 

     <div id="content"> 

      <div class="article column1"> 
       <a href="images/article.jpg" data-lightbox="image-1" data-title="Article"> <img class="hoverme" src="images/2.jpg"></a> 

      </div> 
      <div class="article column2"> 
       <p>Column Two</p> 
      </div> 
      <div class="article column3"> 
       <p>Column Three</p> 
      </div> 
      <div class="article column1"> 
       <p>Column One</p> 
      </div> 
      <div class="article column2"> 
       <p>Column Two</p> 
      </div> 
      <div class="article column3"> 
       <p>Column Three</p> 
      </div> 
     </div> 
     <div id="footer"> 
      <p>Footer Text</p> 
     </div> 

     </div> 

</script> 
    </body> 
</html>

CSS：

@font-face { 
     font-family: 'bikoblack'; 
     src: url('fonts/biko_black.otf'); 
     } 

     @font-face { 
     font-family: 'bikoregular'; 
     src: url('fonts/biko_regular.otf'); 
     } 



a:link { 
     color: #0f4c96; 
    } 
    a:visited { 
     color: #0f4c96; 
    } 
    a:hover { 
     color: #b2b1b1; 
    } 
    a:active { 
     color: #0f4c96; 
    } 

    * { 
     text-align: center; 
     } 
    body { 

     margin: 0; 
     font-size: 100%; 
     background-color: white; 
     } 
    #wrapper { 
     max-width:90%; 
     margin:0 auto; 

    } 



    h1 { 
     font-family: 'bikoblack'; 
     text-transform: uppercase; 
     font-size: 3.5em; 
     line-height: 85%; 
     color: #0f4c96; 
     float: left; 


     } 
    #header { 
     position:relative; 
     overflow:hidden; 
    } 


    #nav { 

     position:absolute; 
     bottom:1.25em; 
     right:1em; 
     } 
    li { 
     display: inline; 
     font-family: 'bikoregular'; 
     color: #0f4c96; 
     padding-left: 2em; 
     } 


    #feature{ 

     background-color: #b2b1b1; 
     padding: 5em; 
     } 

    .column1, .column2, .column3 {  
     width: 32.66%; 
     float: left; 
     margin: 1% 1% 1% 0; 
     background-color: #b2b1b1; 
     }  
    .column3 { 
     margin-right: 0%;} 
     } 
    #feature, .article { 
     margin-bottom: 1em; 
     } 

@media (max-width:767px) { 
    h1 { 
     float: none; 
     width:100%; 
     text-align:center; 
     } 
    #nav { 
     position:static; 
     width:100%;margin:0 auto; 
     top: 5em; 
    }  
     li { 
     width:100px; 
     padding: 0 1em; 
    } 
} 

@media (max-width:480px){ 
    li { 
     display:block; 
     text-align:center; 
     width:auto; 
    } 
} 

a {text-decoration: none; }

来源

2014-09-06 user1527555

您可以创建一个jsfiddle或提供更容易复制和粘贴的代码，以便在测试服务器中进行设置。即：lightbox.css不作为存储库链接或提供;您将其作为假设style.css是提供的CSS代码示例。如果你更简洁，你会得到更好的答案。 – totallytotallyamazing 2014-09-06 21:31:52

对不起，我没有想到这一点。这是lightbox css文件：https://drive.google.com/folderview?id=0BxgeLB33TSvCUWFvSVZWNTVidDQ&usp=sharing – user1527555 2014-09-06 21:53:42

刚刚在小提琴中添加lightbox.css，仍在工作。现在只有js丢失了。 – 2014-09-06 22:12:07

我只是做了一个Fiddle唯一的调整是添加

img {width: 100%; height: 100%;}

so img resizes。不知道这是否适用于你，因为JS等丢失，但你可以试试看。
如果这不起作用，因为可能在小提琴中丢失的lightbox.css覆盖这些值，您可以例如尝试设置高度和宽度：100％！重要。如果缩略图的值将由lightbox.js设置，则应使用Web开发人员工具（如Firebug检查哪些值（如果有）设置为缩略图。
更新：lightbox.css和.js添加到小提琴，仍然调整缩略图图像。
正如你可能已经知道，但应该添加为简短的解释：如果IMG被分配100％的宽度和高度，但位于具有响应大小的容器元素，IMG将只是容器一样大。

更新：如已经测试，将图像高度和宽度设置为100％是不够的，因为缩略图图像显示得太大。因此，有必要在图像的容器中添加适当的max-width。在所提供的示例中，图像继承了类别为.column1的div的最大尺寸;可能需要将此不仅添加到.column1，而且还添加到.column1, .column2, .column3 { ....}的样式，因为它们已具有相同的样式，可能用作其他缩略图图像的容器。

来源

2014-09-06 21:33:31

当我将图像宽度和高度设置为100％时，高度与我正在尝试完成的距离完全相反。这里是我得到的：http://i.imgur.com/UmXHMKl.jpg这就是我要去的：http：//imgur.com/7uZiZmn – user1527555 2014-09-06 23:48:52

好吧，但它是否像小提琴响应？如果是的话，那么这只是一个问题，为容器设置适当的最大宽度/高度（因为jsfiddle中的有限空间，我只添加了一个小图像，因此在那里看起来几乎没问题） – 2014-09-06 23:50:32

只是改变了虚拟img在小提琴到400x400px并做了一个快速测试;我想你必须调整.column1，.column2，.column3 {..}的CSS;只需添加最大宽度取决于最大img大小;用200px测试它，但也许你希望它更小。 img从这些.column-container（s）继承它的最大大小。 – 2014-09-07 00:02:35

需要有灯箱缩略图来调整窗口缩小时的尺寸

回答

相关问题