图片变形了···

seven4634 2011-10-27 10:20:38

点击游览显示图片图片要是大页面就变形了
本来应该是这样的

        <div id="preview_wrapper" class="preview_wrapper">

                            <div id="preview_fake" runat="server" class="preview_fake">

                            <img id="preview_size_fake"  class="preview_size_fake"/>

                            <img id="preview" onload="onPreviewLoad(this)" class="preview" />

                            

                               </div>

                               

                        </div>

这是页面代码

<style type="text/css">

        .preview_wrapper

        {

            display: inline-block;

           

            background-color: #CCCC;

            width: 812px;

            height: 231px;

            text-align:left;

        }

        .preview_fake

        {

            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

            width: 142px;

            height: 248px;

            text-align:left;

        }

        .preview_size_fake

        {

            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

            visibility: hidden;

            display: inline-table;

            width: 6px;

            height: 194px;

            text-align:left;

            

        }

        .preview

        {

             text-align:left;

            width: 45px;

            height: 87px;

        }

        

        .style3

        {

            width: 183px;

            text-align:left;

        }

        .style7

        { width: 50px;

            text-align: right;

        }

    </style>

    <script type="text/javascript">

        function onUploadImgChange(sender) {

           

            if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {

                alert('请上传正常格式的图片');

                return false;

            }



            var objPreview = document.getElementById('preview');

            var objPreviewFake = document.getElementById('<%=preview_fake.ClientID %>');

            var objPreviewSizeFake = document.getElementById('preview_size_fake');



           

            if (sender.files && sender.files[0]) {

                objPreview.style.display = 'block';

                objPreview.style.width = 'auto';

                objPreview.style.height = 'auto';



                objPreview.src = sender.files[0].getAsDataURL();

            } else if (objPreviewFake.filters) {



                sender.select();

                var imgSrc = document.selection.createRange().text;



                objPreviewFake.filters.item(

            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

                objPreviewSizeFake.filters.item(

            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;



                autoSizePreview(objPreviewFake,

            objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);

                objPreview.style.display = 'none';

            }

            document.getElementById("tu").style.display = "block";

        }



        function onPreviewLoad(sender) {

            autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);

        }



        function autoSizePreview(objPre, originalWidth, originalHeight) {

            var zoomParam = clacImgZoomParam(300, 300, 440, 330);

            objPre.style.width = zoomParam.width + 'px';

            objPre.style.height = zoomParam.height + 'px';

            objPre.style.marginTop = zoomParam.top + 'px';

            objPre.style.marginLeft = zoomParam.left + 'px';    

        }



        function clacImgZoomParam(maxWidth, maxHeight, width, height) {

            var param = { width: width, height: height, top: 0, left: 0 };



            if (width > maxWidth || height > maxHeight) {

                rateWidth = width / maxWidth;

                rateHeight = height / maxHeight;



                if (rateWidth > rateHeight) {

                    param.width = maxWidth;

                    param.height = height / rateWidth;

                } else {

                    param.width = width / rateHeight;

                    param.height = maxHeight;

                }

            }



            param.left = (maxWidth - param.width) / 2;

            param.top = (maxHeight - param.height) / 2;



            return param;

        }

        function loadImg() {

            var path = document.getElementById("<%=HiddenField1.ClientID %>").value;

            var imgc = document.getElementById("preview");

            imgc.src = path;

        }

        window.onload = loadImg;



        function enlargeImage1() {

           preview.height = "300"

        }

        function dropImage1() {

            preview.height = "150"

        }



    </script>

帮帮忙吧·