网页图片自适应

    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") %>"  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>

  

时间: 2024-10-09 04:06:16

网页图片自适应的相关文章

网页图片宽度和高度自适应的方法

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多,主要又两种: 第一种是使用CSS来完成:第二种是使用Javascript来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,笔者是指使用效果上有点恼人,本文专门把这两种都总结一下,方便站长们参考使用. 一.使用CSS实现图片

支持鼠标滚轮图片自适应的焦点图代码等

支持鼠标滚轮图片自适应的焦点图代码 支持鼠标滚轮图片自适应的焦点图代码,纯JS构建,可用键盘左右键切换图片,倒序回滚,另外鼠标停止响应后可自动播放功能,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.在head区域引入样式表文件lrtk.css 2.在head区域引入lrtk.js 3.在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可 4.修改间隔时间和自动播放倒计时时间,请打开lrtk.js根据注释提示修改 5.去掉首页文字提示后,请注

html中图片自适应浏览器和屏幕,宽度高度自适应

1.(宽度自适应):在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width,initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%. 2.(字体自适应):字体

网页高度自适应的问题

目标:实现左右两边的高度一致 问题:在各个浏览器下,使用jquery来获取高度出现问题 今天使用jquery(1.11.1)来获取左右两边的高度,并设置左边高度为右边高度,但是中途发现当内容区域有图片的时候,加载的高度只能识别到文字区域的高度.使用谷歌浏览器(版本 35.0.1916.153)测试,发现只要给图片设置了固定高度则会正常识别高度,如果没有设置则不能识别.换IE9浏览器测试,是可以正常识别高度. 因为我这个识别高度主要是用来设置左边的边栏有背景色,并且设置高度和右边内容区域高度一致即

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

css控制div下图片自适应解决方法:图片不超过最大宽度

我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用. 下面的办法的出现应该感谢伟大的c

css sprite---css精灵网页图片应用处理方式分析

CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 1.CSS Sprites简介 加速的关键,不是降低质量,而是减少个数

一个咸鱼的Python爬虫之路(三):爬取网页图片

学完Requests库与Beautifulsoup库我们今天来实战一波,爬取网页图片.依照现在所学只能爬取图片在html页面的而不能爬取由JavaScript生成的图.所以我找了这个网站http://www.ivsky.com 网站里面有很多的图集,我们就找你的名字这个图集来爬取 http://www.ivsky.com/bizhi/yourname_v39947/ 来看看这个页面的源代码: 可以看到我们想抓取的图片信息在<li> 里面然后图片地址在img里面那么我们这里可以用Beautifu

Android ImageView图片自适应

网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id="@+id/dynamic_item_image"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravi