0

これは私のWebページのスクリーンショットです。[オファー画像]の下に、Web画像を表示する画像があります。

http://imageshack.us/a/img684/9584/screenshot20120920at335.png

ただし、実際のWeb画像は

http://imageshack.us/a/img717/5240/1348180361.png

そのコンテナのコー​​ドは

   $('#image_upload_form input').change(function() {

            success: function ( data ) { 
                 var jsonData=data;
                if(jsonData.status==1)
                 {
                 var imagePath="http://www.test.com/play2win_offerimages/" + jsonData.image_name;

                    $('#offer_detail input[name=image]').val(imagePath);
                    myImage = new Image();
                    myImage.src = imagePath;
                                            myImage.width=100;
                                            myImage.height=100;
                    $(myImage).load(function() {
                        $('#offer_image').updateimgto(myImage.src);
                        });

                }  //status=1


            }   //success


        });      //submit

画像myImageを100x100に設定しました。しかし、あなたがウェブページから見ることができるように、画像の一部だけが示されています。

現在、ページに表示されているWeb画像がトリミングされています。これを修正するにはどうすればよいですか。

切り抜きは必要ありません。コンテナに収まるように再スケーリングするだけです。

image_upload_formのhtml

        <form id="image_upload_form" enctype="multipart/form-data" action="http://www.test.com/play2win_api/offers/upload_image" method="POST">

   <input type="hidden" name="MAX_FILE_SIZE" value="8192000" /> 

  <input name="offer_image" type="file" id="imagefile"/></form>
4

2 に答える 2

0

これらの2行を削除することをお勧めします

myImage.width=100;
myImage.height=100;

代わりに、内の入力のスタイル#image_upload_formを設定し、次のコードをスタイルに追加してみてください。

width:100px;height:100px;
于 2012-09-20T22:51:53.830 に答える
0

画像の高さを設定したり、削除したり、次の行をコメントアウトしたりしないでください。

myImage.height=100;

幅を指定するだけで、ブラウザはその幅に応じて画像を再拡大縮小します。

于 2012-09-20T22:52:04.793 に答える