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>
4

2 回答 2

0

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

于 2012-06-12T17:21:50.500 回答
0

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

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

基本上：

  1. 将图像标签放在一个块中
  2. 通过添加基于 noscript 块的图像来逐步增强页面
  3. 在需要时使用媒体查询侦听器更改图像

对于这种技术，您需要几个 polyfill - 一个能够读取 noscript 标签textContent属性，一个能够为 IE < 10 提供媒体查询和媒体查询侦听器。

于 2012-08-01T14:47:52.573 回答