HTML5/jQuery 跨浏览器响应图像

发布于 2024-12-03 03:42:30 字数 1591 浏览 2 评论 0 原文

我正在尝试设计一种显示图像的方法，该方法可以以跨浏览器兼容的方式响应地调整大小。使用 CSS3 媒体查询是行不通的，因为它们没有得到广泛支持。然而，jQuery 使我能够利用 HTML5 中的“数据”属性。

这就是我想出的办法。还有其他人有好的想法吗？或者可以对这个想法进行任何调整吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5/jQuery Responsive Images</title>
        <style>
            body { padding: 0; margin: 0; }
        </style>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script>
        $(window).resize(setSize)
        $(document).ready(setSize);
        function setSize() {
            var bodywidth = $(document).width();
            var small_max = 600;
            var medium_max = 800;

            if (bodywidth > small_max && bodywidth <= medium_max) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-800px'));
                });
            } else if (bodywidth <= small_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-600px'));
                });
            } else if (bodywidth > medium_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src'));
                });
            }
        }
        </script>
    </head>
    <body>
        <img data-src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="Responsive image" style="width: 100%;" />
    </body>
</html>

原文

I'm trying to devise a method of displaying images that resize responsively in a cross-browser-compatible manner. Using CSS3 media queries won't do because they're not supported widely. jQuery, however, affords me the ability to utilize the "data" attributes in HTML5.

This is what I have come up with. Does anyone else have good ideas? Or can offer any tweaking on this idea?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5/jQuery Responsive Images</title>
        <style>
            body { padding: 0; margin: 0; }
        </style>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script>
        $(window).resize(setSize)
        $(document).ready(setSize);
        function setSize() {
            var bodywidth = $(document).width();
            var small_max = 600;
            var medium_max = 800;

            if (bodywidth > small_max && bodywidth <= medium_max) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-800px'));
                });
            } else if (bodywidth <= small_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-600px'));
                });
            } else if (bodywidth > medium_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src'));
                });
            }
        }
        </script>
    </head>
    <body>
        <img data-src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="Responsive image" style="width: 100%;" />
    </body>
</html>

分享到QQ

分享到微博