javascript - 窗口缩小时需要有灯箱缩略图来调整大小-6ren

javascript - 窗口缩小时需要有灯箱缩略图来调整大小

转载作者：行者123 更新时间：2023-11-28 09:31:07

25

4

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

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

最佳答案

我刚刚制作了一个 Fiddle唯一的调整是添加

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

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

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

关于javascript - 窗口缩小时需要有灯箱缩略图来调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25704787/

25

4

0

文章推荐： javascript - 如何使用淡入效果查看archive.org上的网站？

文章推荐： javascript - 使用 ClientScript 类将 VB.net 数组传递给 javascript

文章推荐：用于在 react 中为一行 antd 表着色的 CSS

文章推荐： javascript - Safari 7.0.3 动画 ScrollTop div 不工作？

具有缩放功能的 jQuery 灯箱
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
javascript - 灯箱 + 图像叠加下的文本
如何在放大的每个图像下添加自定义文本？现在它基于 alt 文本，但我想使用图像等对其进行更多自定义。完美的解决方案是将文本显示在 div 中。这是代码笔: // Create a lightbox
javascript - Galleriffic 灯箱
为了重新启动我的客户站点 (craft2eu.net)，我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ，但它基于旧版本的 Galleriffic，它带
css - 灯箱:使屏幕其余部分透明的问题
设计一个网站，其中我在很多地方使用了很多背景:rgba。因此，当我尝试制作一个灯箱时，我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
html - 移动友好的图像 - 灯箱
晚上好，感谢您首先尝试提供帮助。我有一个“作品集”页面，其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中，5 宽 9 向下。简单地说，当您在浏览器中单击并展开图像时，效果很好。
javascript - 灯箱/表格问题
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息，而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
javascript - 灯箱 - 自动调整全屏
我正在尝试使用这个灯箱， http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
javascript - 灯箱--> 引擎盖下是什么？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
ruby-on-rails - rails 灯箱？
有谁知道一个好的 Rails 灯箱插件？我找到了 redbox，但它似乎已经过时了。谢谢! -艾略特最佳答案我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表，
twitter-bootstrap - 灯箱 - 多张图片
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。是
mobile - 为移动设备优化 prettyPhoto 灯箱？
我目前正在使用 prettyPhoto在我正在开发的网站上，但在移动设备上遇到了一个小问题。该插件具有选项“allow_resize: false”，它不允许调整大于视口(viewport)的照片大
jquery - 灯箱 jquery 显示文本
我正在使用jquery lightbox ，有没有办法显示文本字段而不是图像或两者都显示？或者也许是另一种在灯箱弹出窗口中显示文本的方式？最佳答案这是灯箱的最佳示例视频 https://www.
jquery - 如何在页面加载时自动打开 PrettyPhoto 灯箱？
我对 Jquery 很陌生，我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例，但我一直在我的所有网站上使用 Pret
javascript - 具有模糊深色背景的纯 CSS 灯箱
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激，因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像，这样当我单击每个图像时，此灯箱效果将适用
javascript - CSS/Javascript 灯箱
首先，我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师，正在帮助 friend 设计她的网站。截至目前，我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
javascript - jQuery 灯箱。找不到方法
我肯定遇到了一个简单的问题，但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到，我只是不明白为什么。代码是 $(f
javascript - 灯箱 iframe 关闭
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe？我的代码是这样的: 最佳答案通过this answer至 Close a ligh
javascript - 非 jQuery 灯箱
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
JavaScript 弹出框 vs 灯箱？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
javascript - 我应该如何使用带 Angular 灯箱
我正在使用 angular 来显示我的 Student Object 的详细信息一切正常但还需要作业文本上的超链接，这样当有人点击它时，会打开一个灯箱，其中包含所有作业对象的详细信息。现在我的老

首页

博学

6Ren·AI

商城

javascript - 窗口缩小时需要有灯箱缩略图来调整大小