Question

我正在尝试设计一种显示图像的方法，这些图像以跨浏览器兼容的方式响应调整大小。使用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>

Answer 1

将img标签设置为display：inline将为您处理响应。

Answer 2

看一下我在这方面做的一系列博客文章：

http://queryj.wordpress.com/2012/07/06/responsive-images-whats-the-problem-9-2/

基本上：

将图片标记放在块中
通过添加基于noscript块的图像逐步增强页面
使用媒体查询侦听器在需要时更改图像

这项技术需要几个polyfill - 一个能够读取noscript标签 textContent 属性，另一个用于向IE＆lt;提供媒体查询和媒体查询监听器。 10。

HTML5 / jQuery跨浏览器响应图像

2 个答案: