2

ユーザーがアップロードした画像があるとしましょう。アップロード スクリプトは mb を制限しますが、画像サイズは制限しません (600X200、200X350 など、任意の比率にすることができます)。

css で記述された Twitter ブートストラップ イメージ ハンドラーを使用して、サイトの一部にこのイメージを既に表示しています。これはプロフィール写真に適しています。私のサイトはレスポンシブなので、カバーの幅は 900 ピクセル、または画面解像度が 900 ピクセル未満の場合は 100% です。高さは常に 200px に固定されます。したがって、CSSを使用して（おそらくjqueryでも）正しい画像表示を制御する方法があることは知っていますが、私はフロントエンド開発者ではなく、PHP開発者であり、これを行うためにサーバー側スクリプトを使用したくありません. 最初に提案やコード（css、javascript）を探しています。これはすでに作成されたソリューションである必要があると思いますが、Googleでは見つかりません。アドバイスをありがとう！

4

3 に答える 3

2

CSSのみのソリューションを使用することは絶対にお勧めしません。アップロードされた写真に任意の解像度がある場合、クライアント側のソリューションでさえありません。php スクリプトを使用して、アップロードされた画像のサイズ変更されたバージョンを保存し、それらをクライアントに提供したいと考えています。ブロックの背景画像として css を使用するか (クロス ブラウザーではありません)、img タグとして js を使用してサイズを変更します。

CSS:

.myselector{
    background-size: cover;
}

または js (jquery):

$(function(){
    var containers = $('.myselector'), w = $(window);
    function onResize(){
        //resize code
        containers.each(function(){
            var $this = $(this),
                w = $this.width(),
                h = $this.height(),
                ratio = w/h,
                $img = $('img',$this); // assuming there is only one img in each container
            $img.css({'width':'auto','height':'auto'});
            var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
            if(iratio>ratio){
                $img.css({
                    height:'100%',
                    width:'auto',
                    marginLeft: (w-iw*(h/ih))/2
                });
            }
            else{
                $img.css({
                    width:'100%',
                    height:'auto',,
                    marginTop: (h-ih*(w/iw))/2
                });
            }
        });
    }
    w.bind('resize',onResize);
    //resize on each image load event
    $('img',containers).bind('load',onResize);
    onResize();
});

ここに実用的なフィドルがあります：http://jsfiddle.net/kHxd2/2/

画像のオンロード リスナーは、キャッシュされた画像が IE でレンダリングされるときに反応するように微調整する必要がある場合があります: http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

また、まれな非 js ブラウザの CSS ルールを設定することもできます... (.myselector img{width:100%;})

編集：コンテナCSS：

.myselector{
    width: 100%;
    max-width: 900px;
    height: 200px;
    margin: auto; /* centering */
    overflow: hidden;
}

更新されたフィドルを参照してください: http://jsfiddle.net/kHxd2/3/

最善の解決策は、イメージ コンテナーをメイン ラッパー div に埋め込み、上記の CSS ルールをその大きなコンテナーに適用することです。

サーバー側のサイズ変更を処理するための便利なコードを次に示します: http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html

于 2012-11-10T10:43:05.523 に答える
0

この画像を背景画像として配置し、スタイルを使用する必要があります。

background-image: url(url/to/your/image.png);
background-size: cover;
于 2012-11-10T10:39:21.523 に答える
0

css3 には as background-size:cover;andと呼ばれるプロパティがありbackground-size:contain;ます。ニーズに合わせて使用​​することをお勧めします。



両方の寸法が背景配置領域の対応する寸法以下であることを確認しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。

cover

両方の寸法が背景配置領域の対応する寸法以上であることを確認しながら、背景画像をできるだけ小さくスケーリングする必要があることを指定します。

于 2012-11-10T10:39:30.097 に答える