3

ユーザーが投稿した画像のサムネイルを作成しようとしていますが、サイズはすべて異なる可能性がありますが、やろうとしているときは次のとおりです。

画像の短い方の寸法を使用して、画像に許可されたスペースを埋めます。（画像が500x350で、サムネイルのサイズが250x250の場合、画像の高さがサムネイルを埋めます）、画像を他の次元の中央に配置しようとしています。これを行うのに問題があり、CSS と Javascript のどちらを使用すべきかわかりません。どんな提案も素晴らしいでしょう。

解決策：これで思い通りに動作するようになりました。 

    function sizeThumbs(){
        //resize each idea image so it is a good sized/centered thumbnail
        $.each($("img.thumbpic"), function() {
            var maxWidth = 250;
            var maxHeight = 150;
            var width = $(this).width();
            var height = $(this).height();

            if((width/maxWidth) < (height/maxHeight)){
                var multiplier = maxWidth/width;
                var newHeight = height * multiplier;

                $(this).css("width", maxWidth);
                $(this).css("height", newHeight);

                var heightD = (maxHeight - newHeight)/2;
                $(this).css("margin-top", heightD+"px");
                $(this).css("margin-bottom", heightD+"px");
            }else{
                var multiplier = maxHeight/height;
                var newWidth = width * multiplier;

                $(this).css("width", newWidth);
                $(this).css("height", maxHeight);

                var widthD = (maxWidth - width)/2;
                $(this).css("margin-left", widthD+"px");
                $(this).css("margin-right", widthD+"px");
            }
        }); 
    }
4

3 に答える 3

2

私も同様の問題を抱えていましたが、画像を中央に配置する必要があるのに、解決策は左右の余白をトリミングしようとしていました。私の解決策はこのJSフィドルにあります：http：//jsfiddle.net/david_binda/9tTRQ/1/

非常にシンプルです。2つの画像ラッパーとシンプルなCSSが必要です。

HTML

<div class="thumb-wrapper">
   <a href="" title="" class="img">
      <img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />    
</a>
</div>

CSS

.thumb-wrapper{
    width: 250px; // desired thumbnail width
    height: 250px; // desired thumbnail height        
    overflow: hidden;    
    position: relative;
    margin: 0 auto;
}
.thumb-wrapper .img{
    display: block;    
    position: absolute;
    width: 350px; // should be wider than final thumbnail
    height: 250px; // desired thumbnail height
    left: 50%;
    margin-left: -175px; // half of above defined width eg. 350/2 = 175
}
.thumb-wrapper .img img{
    width: auto !important;
    max-width: 350px !important; // should be wider than final thumbnail
    min-width: 250px !important; // desired width of thumbnail
    height: 250px !important; // desired thumbnail height
    margin: 0 auto;
    display: block;
}​
于 2012-06-24T14:27:18.910 に答える
0

max-width: 250px; max-height: 250px;画像の CSS で設定します。ブラウザが魔法をかけてくれます。

于 2012-04-06T22:09:32.057 に答える
0

html5 キャンバス要素とtranslateメソッドを使用することもできます

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

サイズ変更はブラウザ エンジンに実装されているため、特に 1 ページに多くの画像がある場合は、ネイティブの JavaScript 実装よりもはるかに高速になる可能性があります。

于 2012-04-07T12:23:08.617 に答える