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

これについて私が行った一連のブログ投稿をご覧ください。

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

基本的：

  1. ブロックにイメージタグを配置する
  2. noscript ブロックに基づいて画像を追加することにより、ページを段階的に強化します。
  3. 必要に応じてメディア クエリ リスナーを使用して画像を変更する

この手法には 2 つのポリフィルが必要です。1 つは noscript タグのtextContentプロパティを読み取れるようにするためのもので、もう 1 つはメディア クエリとメディア クエリ リスナーを IE < 10 に提供するためのものです。

于 2012-08-01T14:47:52.573 に答える
0

img タグを display:inline に設定すると、応答性が処理されます。

于 2012-06-12T17:21:50.500 に答える