Question

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

链接到Lightbox 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; }

Answer 1

我刚做了一个Fiddle，只进行了添加

的调整

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

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

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

当窗口缩小时，需要使灯箱缩略图调整大小

1 个答案: