窗口缩小时需要调整灯箱缩略图的大小答案

【问题标题】：Need to have lightbox thumbnail to resize when window shrinks窗口缩小时需要调整灯箱缩略图的大小
【发布时间】：2014-10-31 12:33:42
【问题描述】：

我正在制作响应式作品集，但我的灯箱缩略图处于停滞状态。当浏览器宽度减小时，我需要缩略图与网站的其余部分一起缩小，但目前它只是保持相同的大小。我不确定从这里去哪里。任何帮助将不胜感激！

灯箱 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; }

【问题讨论】：

您能否创建一个 jsfiddle 或提供更容易复制和粘贴的代码，以便在测试服务器中设置。即：lightbox.css 没有作为存储库链接给出或提供；您假设 style.css 是提供的 CSS 代码示例。如果你更简洁，你会得到更好的答案。
对不起，我没想到。这是灯箱 css 文件：drive.google.com/…
刚刚在小提琴中添加了lightbox.css，仍然有效。现在只有js不见了。
我是个白痴！对不起！ drive.google.com/file/d/0BxgeLB33TSvCZUpYZG1TY3VXUjA/…
np ;)。从那里包含 js 不起作用，猜猜如果您只是检查为 img 宽度和/或高度添加 css 是否适合您，会更容易。将检查是否在线找到此 lightbox.js 以包含它或向下 + 上传它。

标签： javascript jquery html css

【解决方案1】：

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

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

所以 img 会调整大小。由于缺少 js 等，不确定这是否适合您，但您可以尝试一下。
如果这不起作用，因为小提琴中缺少的 lightbox.css 可能会覆盖这些值，你可以例如尝试设置高度和宽度：100％！重要。如果缩略图的值由 lightbox.js 设置，您应该使用 Web 开发人员工具检查 DOM，例如Firebug 检查哪些值（如果有）设置为缩略图。
更新：lightbox.css 和 .js 添加到 Fiddle，仍然调整缩略图图像的大小。
您可能已经知道，但应该作为简短说明添加：如果 img 分配了 100% 的宽度和高度，但位于具有响应大小的容器元素中，则 img 将与容器一样大。

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

【讨论】：

当我将图像宽度和高度设置为 100% 时，高度与我想要完成的目标相差甚远。这是我得到的：i.imgur.com/UmXHMKl.jpg 这就是我想要的：imgur.com/7uZiZmn
好的，但它是否像小提琴一样响应？如果是，那么这只是为容器设置适当的最大宽度/高度的问题（由于 jsfiddle 中的空间有限，我只添加了一个小图像，因此在那里看起来几乎没问题）
刚刚把fiddle中的dummy-img改成400x400px，做了个快速测试；我猜你必须调整 .column1, .column2, .column3 {..};只需根据最大 img 大小添加最大宽度即可；用 200px 测试它，但也许你想让它更小。 img 从这些 .column-container(s) 继承其最大大小。