Question

我在这里有一个演示来说明我的问题

http://www.ttmt.org.uk/forum/gallery1/

这是一个简单的页面滚动图像列表。

单击图像时，其上方会出现一个较大的图像，灯箱样式。

我希望此图像的高度为窗口高度的百分比（85％）和按比例调整的宽度。

如果调整窗口大小，我希望图像按比例缩放。

在Safari中，大图像以正确的高度显示，并在高度改变时按比例缩放，但在宽度变化小于图像宽度时无法正确缩放。

在Firefox中，大图像不会出现在正确的高度，并且在高度改变时不会缩放，但在宽度改变时会按比例缩放。

如何让图片在浏览器中按比例显示正确的高度和比例。

    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">
        ul#gallery {
            margin:100px 0 0 0;

            float:left;
            height:500px;
            margin-right:-20000px;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          height:100%;
        }
        #header{
          position:fixed;
          margin:20px 0 0 20px;
        }
        #header img,
        #header ul#info{
          float:left;
        }
        #header ul#info{
          margin:5px 0 0 50px;
        }
        #header ul#info li{
          color:#aaa;
          font:.95em/1.5em Helvetica, sans-serif;
        }
        #header ul#info li a{
          color:#aaa;
          text-decoration:none;
        }
        #header ul#info li a:hover{
          color:#333;
        }
        #header select{
          margin:20px 0 0 50px;
        }
        #lightbox {
                position:fixed; 
                top:0; 
                left:0; 
                width:100%; 
                height:100%; 
                background:url(overlay.png) repeat; 
                text-align:center;
            }
            #lightbox p {
                text-align:right; 
                color:#fff; 
                margin-right:20px; 
                font-size:12px; 
            }
            #lightbox img {
                box-shadow:0 0 15px #111;
                -webkit-box-shadow:0 0 15px #111;
                -moz-box-shadow:0 0 15px #111;
                max-width:940px;
            }
            #content img{
              height:85%;
              max-width:100%;
            }
      </style>

      </head>

    <body>

      <ul id="gallery">
        <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
        <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
        <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
        <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
        <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
        <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
        <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
        <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
        <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
        <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
        <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
        <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
        <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
        <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
        <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
      </ul>


    <script>
      jQuery(document).ready(function($) {

        $('.lightbox_trigger').click(function(e) {

            e.preventDefault();

            var image_href = $(this).attr("href");

            if ($('#lightbox').length > 0) { // #lightbox exists

                $('#content').html('<img src="' + image_href + '" />');

                //$('#lightbox').show();

                $('#lightbox').fadeIn('2000');
            }

            else { 

                var lightbox = 
                '<div id="lightbox">' +
                    '<p>Click to close</p>' +
                    '<div id="content">' + 
                        '<img src="' + image_href +'" />' +
                    '</div>' +  
                '</div>';

                $('body').append(lightbox);
            }

        });

        $('#lightbox').live('click', function() { 
            $('#lightbox').hide();
        });

      });
      </script>
    </body>

    </html>

Answer 1

尝试添加

height: auto;

到图片的CSS。

在窗口调整大小时按比例缩放图像

1 个答案: