-1

親divに合わせて画像のサイズを変更してトリミングするjqueryプラグインを見つけています。なにか提案を ？ありがとう。

私の間違いですが、画像を切り取る（拡大縮小しない）ことを意味します。多くの異なるサイズの画像と 1 つの固定サイズの div があるとします。divの垂直方向または水平方向の寸法に合わせて画像のサイズを変更し、親のdivに合わせてオーバーフロー相手の寸法をトリミングする必要があります。それは動的なので、それを行うにはプラグインまたはテンプレートが必要です。

4

3 に答える 3

2

親divのクラスと関数に必要なimgサイズを送信するだけで使用できるJquery関数を作成しました。子imgをそのサイズに調整し、水平または垂直の中央に配置します。img が親 div より小さい場合、親 div は子のサイズに縮小されます。（それ以来、私がそれを使用していたためにそのようにしました。）

デモ

これがhtml構造です

<div class="photo-card-image-wrapper">
    <img src="img.png" />
</div>

親divで必要な関数を機能させるために必要な最小限のcssは次のとおりです

.photo-card-image-wrapper {
    overflow: hidden;
}

親のクラスまたはIDで送信する必要がある関数を呼び出すために必要なものは次のとおりです。または.photo-card-image-wrapper、IDである場合#photo-card-image-wrapper

$(function() {
  cropAndCenterImage(".photo-card-image-wrapper", 154);
});

これはあなたが必要とする機能です

function cropAndCenterImage(el, size) {
    //el = img wrapper
    //img = img element
    if (size === undefined || size === null) { 
      size = 154;
    }
    var $el = $(el);
    var $img = $(el + " img");
    //console.log($el);
    //console.log($img);
    $img.width("auto").height("auto");
    var imgWidth = $img.width();
    var imgHeight = $img.height();
    //console.log(imgHeight, imgWidth);

    //hopefully that returns the img to it's default height and width by making the inline style to empty quotes

    if( imgWidth > imgHeight ) {
        //Crop image
      //console.log("width greater than height");
        if ( imgHeight >= size  ) {
            //console.log("hit if");
            $img.height(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgHeight).width(imgHeight);
        } else {
            //console.log("hit else");
            $el.height(imgHeight).width(imgHeight);
            $img.height(imgHeight).width(imgWidth);
        }

        //Center image horizontally
        var leftInt = (imgWidth - $el.width()) / 2;
        $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" });
    } else {
        //Crop image
      //console.log("height greater than width");
        if ( imgWidth >= size  ) {
            $img.width(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgWidth).width(imgWidth);
        } else {
            $el.height(imgWidth).width(imgWidth);
            $img.height(imgHeight).width(imgWidth);
        }
        imgHeight = $img.height();
        //Center image vertically
        var topInt = (imgHeight - $el.height()) / 2;
        //console.log(topInt);
        $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"});
    }

}

それはあなたの典型的なJquery関数ではないことはわかっています。私はまだそれを行うことを学んでいませんが、それでも関数です。

于 2013-11-02T04:55:53.837 に答える
1

これにはプラグインは必要ありません... CSS だけでできます。

img { width:100%; }

追加することもできますがheight:100%;、画像を比例してスケーリングしません。

フィドル。

于 2013-03-26T03:16:10.973 に答える
1

これは、あなたの望むことですか？

<html>
<head>
  <style type="text/css">
  div{ margin:10px 0px; border: 1px solid black; dispaly:block;} 
 div img{width:100%;height:100%;}  
</style>
</head>
<body>
  <div style="width:100px; height:50px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>
<div style="width:100px; height:250px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:60px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:220px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:150px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:20px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:50px; height:400px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>   
</body>
</html>
于 2013-03-26T03:35:25.423 に答える