プレビューで画像が正しく表示されない

Question

現在、Jcropを使用して画像を切り抜くことができます。 画像を選択できます。画像は画像にロードされ、サムネイルは画像がどのように表示されるかを表示します。

私はWampサーバーを使ってlocalhostでテストしていましたが、WordPress側にアップロードするとすぐにプレビューが間違っていました。 ここでは、間違ったときの外観のスクリーンショットを示します。image 黒い線は、クロップ選択が歪んでサムネイルから外に出ているのがわかるように、サムネイルの合計幅を示しています。

localhostと私のwordpressウェブサイトのinspect要素のdiffrenceを見て、widthとheight要素がアップロードされているイメージの約半分であることを確認しました。ローカルホスト上では、画像の高さminWidthとminHeightの値がそれ以外の画像があまりにも低くなり、作物の選択があるべきピクセルの最小量です

$(document).ready(function(){ 
     $('#preview').Jcrop({ 
      onChange: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)}, 
      onSelect: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)}, 
      onRelease: function(){releaseCheck(minWidth, minHeight)}, 
      boxWidth: 400, 
      bgColor: 'white', 
      allowSelect: 'false', 
      setSelect: [0, 0, minWidth, minHeight], 
      minSize: [ minWidth, minHeight ], 
      aspectRatio: minWidth/minHeight 
     }, function(){ 
      jcrop_api = this; 
      }); 
    $('#thumbnail-div').css({"width" : thumnailWidth, "height" : thumbnailHeight, "background-image" : "url(" + achtergrondLink + ")"}); 
    $('#thumbnail').css({"opacity" : "0.7"}); 
}); 

：ここ

は私のJcrop iが使用する設定と関連するかもしれない他のコードです解決。 jcropプラグインは、画像をボックスに拡大縮小する方法を自動的に計算します。 サムネイルの幅と高さは、あらかじめ設定されている変数です。

これは、トリミング領域が変更されるか選択されるたびに実行されるshowpreview機能です。

function showPreview(c, origWidth, origHeight, thumnailWidth, thumbnailHeight){ 
     $('#x1').val(c.x); 
     $('#y1').val(c.y); 
     $('#x2').val(c.x2); 
     $('#y2').val(c.y2); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 

     var rx = thumnailWidth/c.w; 
     var ry = thumbnailHeight/c.h; 

     $('#thumbnail').css({ 
      width: Math.round(rx * origWidth) + 'px', 
      height: Math.round(ry * origHeight) + 'px', 
      marginLeft: '-' + Math.round(rx * c.x) + 'px', 
      marginTop: '-' + Math.round(ry * c.y) + 'px' 
     }); 
    } 

私はすべてのコードを1つのファイルにもスクリプトタグに入れて使用するすべてのコードとのリンクもあります。 Full source code

Answer 1

私は最終的にそれは、それはいくつかのテーマのstyle.cssにこのCSSを持っていることが判明した：

img { 
max-width: 100%; 
} 

それがあればということ判明あなたはそれの背後にあるあなたの完全な画像を持っているサムネイルを持っていて、オーバーフローが隠されています。プレビューでクロップ領域を変更すると、サムネイルdivの背後にある画像が移動して最終製品のように見えます。

ただし、最大幅：100％;すべての画像でサムネイルが実際には実行してはいけないdivにスケールされます。

max-width：100％を無効にするだけです。またはあなた自身のCSSをmax-widthに設定してください：none！important

Answer 2

頭にこのスタイルを追加しました。見事に動作するようです。このようにしたいですか？ searchngの約5時間後に

 <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.Jcrop.js"></script> 
     <script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script> 
     <script src="https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay.min.js"></script> 
     <link href='http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.css' rel='stylesheet' type='text/css'> 

     <style> 
      #thumbnail-div #thumbnail{ 
        opacity: 1 !important; 
      } 
      .thumbnail-div{ 
        opacity: 0.7; 
      } 
     </style> 

updated code