3

私はモバイルウェブサイトで作業していて、その中に次のようなdivと画像があります。

<div id="wrapper">
    <div id="content">My img tag here</div>
</div>

解像度、サイズ、向きを気にせずに、携帯電話やタブレットで画像のサイズを変更する方法を知りたいです。ここでは、上記のシナリオに基づいて可能な限り最良の解決策を探しています。

4

3 に答える 3

2

メディアクエリを使用して、方向に応じてCSS属性を指定できます。

@media screen and (orientation:portrait) {
    img {
        // css attributes
    }
}

@media screen and (orientation:landscape) {
    img {
        // css attributes
    }
}

または、画面幅に対してそれを行うことができます：

@media screen and (max-width: 500px) {
    img {
        // css attributes
    }
}
于 2012-12-23T07:29:09.650 に答える
1

上記の手法が最も普及していますが、私が理解しているように、望ましい解決策は、デバイスのサイズ、画面の解像度、または向きに依存するべきではありません。

私は2つの巧妙な解決策についてのみ言及しますが、CSSでこの仕事を処理するものはありません。

https://github.com/adamdbradley/foresight.js

http://adaptive-images.com/

2番目のソリューションは、訪問者のデバイスの画面解像度をキャプチャし、キャッシュを自動的に作成し、埋め込まれたhtmlマークアップの最も適切な画像サイズを提供するため、賢いソリューションです<img>。

注：ただし、これはサーバーに依存するソリューションであり、PHPコード環境でのみ使用する必要があります。

...そしてここに同じ目的のためのjqueryプラグインがあります： https ：//github.com/teleject/hisrc

于 2012-12-23T07:45:10.100 に答える
0

jqueryを使用した簡単な解決策を見つけました...。

$(document).ready(function() {

    $width = $('#content').width();

    $('#content img').css({
        'max-width': $width,
        'height': 'auto'
    });
});

</ p>

于 2012-12-28T13:36:20.333 に答える