网页图片自适应

    function setImgMiddle(img) {  
        var $img = $(img),  
            $panel = $(img).parent();//图片容器  
  
        var img_width = $img.width(),img_height = $img.height(),//图片宽高  
            panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高  
  
        if(panel_width/panel_height < img_width/img_height){  
            $img.width(panel_width);  
            $img.css('margin-top', (panel_height - $img.height()) * 0.5);  
        }else{  
            $img.height(panel_height);  
            $img.css('margin-left', (panel_width - $img.width()) * 0.5);  
        }  
        $img.fadeIn(100);  
    }

    $(function () {
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0") {
            $(".imgClick").click(function () {
                var _href = $(this).parent().parent().attr('href');
                window.open(_href);
            });
        }
    });

  前台页面 

            <asp:Repeater ID="rptgzsw" runat="server">
                        <ItemTemplate>
                            <li><a href="/Product/Product.aspx?id=<%#Eval("id") %>" title="<%#Eval("name") %>">
                                <div style="height: 200px">
                                    <img src="<%#Eval("fristpic") %>" onload="setImgMiddle(this);" alt="<%#Eval("name") %>" class="imgClick" />
                                </div>
                            </a>
                                <p>
                                    <strong>¥<%#Eval("price") %></strong></p>
                                <p>
                                    <a href="/Product/Product.aspx?id=<%#Eval("id") %>" title="<%#Eval("name") %>">
                                        <%#Ctrl.Comm.Str.StrCut(Eval("Name").ToString(),30)%></a>
                                </p>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>

  

posted on 2015-06-30 11:02  王赫赫  阅读(304)  评论(0编辑  收藏  举报

导航