Question

这是我的网页的屏幕截图，在优惠图片下，显示网络图片的图片。

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

但是，实际的网络图片是

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。然而，正如您从网页上看到的那样，只显示了部分图像。

现在，页面上显示的网页图片被裁剪了......如何修复？

我不想裁剪，只能重新缩放以适应容器。

html for image_upload_form

        <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>

Answer 1

我建议删除这两行

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

而是尝试在#image_upload_form内设置输入样式，并将以下代码添加到您的样式中：

width:100px;height:100px;

Answer 2

请勿设置图片的高度，删除或注释掉以下行：

myImage.height=100;

只需指定浏览器将根据该宽度重新缩放图像的宽度。

尝试在Javascript中正确显示Web图像

2 个答案: