Javascript 需要有lightbox缩略图才能在窗口收缩时调整大小

我正在制作一个反应迅速的投资组合，而我的lightbox缩略图却停滞不前。当浏览器宽度减小时，我需要缩略图与网站的其余部分一起缩小，但目前它的大小保持不变。我不知道接下来该怎么办。任何帮助都将不胜感激

链接到Lightbox css文件：

链接到lightbox.js：

HTML:

我刚刚做了一个调整，只需要添加一个

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

因此，img将调整大小。 不确定这是否适合您，因为缺少js等，但您可以尝试一下。
如果因为小提琴中缺少的lightbox.css可能会覆盖这些值而无法使用，您可以尝试设置高度和宽度：100%！重要的如果缩略图的值是由lightbox.js设置的，您应该使用诸如Firebug之类的web开发工具检查DOM，以检查哪些值（如果有的话）被设置为缩略图。
更新：lightbox.css和.js添加到小提琴中，仍在调整缩略图的大小。
正如您可能已经知道但应该作为简短的解释添加的那样：如果img被指定为100%宽度和高度，但位于具有响应大小的容器元素中，则img将与容器一样大

---

更新：如前所述，将图像高度和宽度设置为100%是不够的，因为缩略图显示得太大。因此，有必要在图像的容器中添加适当的

max width

。在提供的示例中，图像继承了类为

.column1

的div的最大大小；不仅对于

.column1

，而且对于

.column1、.column2、.column3{……}的样式，可能需要添加此选项

因为它们已经具有相同的样式，并且可能被用作附加缩略图图像的容器。

您可以创建一个JSFIDLE或提供更容易复制和粘贴的代码，以便在测试服务器中进行设置吗。i、 e.：lightbox.css未作为存储库链接提供或提供；假设style.css是提供的css代码示例。如果你更简洁，你会得到更好的答案。对不起，我没有想到这一点。这是lightbox css文件：刚刚在fiddle中添加了lightbox.css，仍然有效。现在只有js不见了，我是个白痴！很抱歉np；）。从那里包含js是不起作用的，我想如果你只是检查一下为img宽度和/或高度添加css是否对你有效会更容易。将检查以联机查找此lightbox.js以包含它或向下-+上载它。当我将图像宽度和高度设置为100%时，高度与我尝试实现的高度相差很远。这就是我得到的：这就是我想要的：好吧，但它像小提琴一样灵敏吗？如果是，那么问题只是为容器设置适当的最大宽度/高度（因为JSFIDLE中的空间有限，我只添加了一个小图像，因此在那里看起来几乎可以），只是将FIDLE中的虚拟img更改为400x400px并进行了快速测试；我想您必须调整.column1、.column2、.column3{..}的css；只需根据最大img大小添加最大宽度；用200px进行了测试，但也许你想要更小的。img从这些.column容器继承其最大大小。

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

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