精华内容
下载资源
问答
  • iframe缩小引用网页比例代码

    热门讨论 2015-01-04 14:17:21
    HTML使用iframe标签引用外部网页时,可以设置外部网页显示比例适配当前iframe的大小,兼容各种浏览器哦
  • 页面单独显示什么都正常比例也正常,直接上图![图片说明](https://img-ask.csdn.net/upload/201908/30/1567129246_850674.png),这个是大小刚刚好的,但是从其他页面超链接过来就整体缩小了![图片说明]...
  • 原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例" 未满足需求时 满足需求之前,登陆框的 margin-top 以及 margin-left 的值用的都是精确px(像素值); 整体页面 css(审查元素) ...

    需求

    今天帮朋友做个小网页,但一直没明白对方的需求;

    原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例"

    未满足需求时

     满足需求之前,登陆框的 margin-top  以及 margin-left 的值用的都是精确px(像素值);

    整体页面

    css(审查元素)

    把浏览器窗口缩小

     会发现"登陆框"会因为"margin-left:1000px"的原因留在它固有的位置,从而看不到它,自然也就没有达到全比例自适应的效果

     

     同样道理,因为"margin-top:300px"的原因,当纵向缩小浏览器窗口时,"登陆框"也会留在它固有的位置,从而看不到它

    问题原因

    因为 margin-top 和 margin-left 的值用的都是精准px值, 所以值是固定的, 位置是固定的;

    当你缩小浏览器窗口时,目标元素的空间位置是不会改变的.

    解决方案

    方案一

    把margin-top 和 margin-left  的值改成百分比形式;

    修改后的css(审查元素)

    把浏览器窗口缩小

    最大限度横向缩小浏览器,目标元素依然显示

    纵向缩放同比之前,缩放幅度基本满足需求

    方案二

     把margin-top 和 margin-left  改成 position, 利用position属性的 absolute 属性确定目标元素的比例位置

    并且位置属性的值依然要用百分百形式

    修改后的css(审查元素)

    把浏览器窗口缩小

    最大限度横向缩小浏览器,目标元素完全显示

     

    纵向缩放效果

     

    转载于:https://www.cnblogs.com/bigtreei/p/8490452.html

    展开全文
  • C# Winfrom项目中,有个webBrowser控件,大小为:900*540。webBrowser控件中内嵌的网页大小为:...怎么样让网页的整体内容缩小到90%后再嵌入到webBrowser控件中显示呢? 请问,能不能提供相关的源码或参考资料。谢谢!
  • js比例缩小显示图片

    2009-05-31 17:47:00
    设定图片最大允许显示的尺寸 "JavaScript"> function DownImage(ImgD,MaxWidth,MaxHeight){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ 

    设定图片最大允许显示的尺寸

     

    1. <SCRIPT LANGUAGE="JavaScript">
    2.     <!--
    3. function DownImage(ImgD,MaxWidth,MaxHeight){ 
    4.     var image=new Image(); 
    5.     image.src=ImgD.src; 
    6.     if(image.width>0 && image.height>0){ 
    7.         var rate = (MaxWidth/image.width < MaxHeight/image.height)?MaxWidth/image.width:MaxHeight/image.height;
    8.         if(rate <= 1){          
    9.             ImgD.width = image.width*rate;
    10.             ImgD.height =image.height*rate;
    11.         }
    12.     } 
    13. }
    14. //-->
    15. </SCRIPT>

    <img src="1.jpg" border="0"  id="img" οnlοad="DownImage(this,130,130);"/>

    展开全文
  • 我有一个网页,里面的内容就是一幅图片和一个按钮,我希望判断得到这幅图片的高和移动设备屏幕的高,然后等比例缩小整个网页,使得图片正好能完全显示在屏幕中,该如何实现? 直接设定图片的宽高什么的就算了,我是...
  • 移动端页面设置了”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>这个属性,为什么有的页面在部分手机上显示比例缩小了,而有的没问题。![图片说明]...
  • 开发遇到的问题 我们平时开发,后台通过在线编辑器,编辑帖子,上传图片,比如ckeditor配置上传图片,是可以设置图片大小的; 这种设置对pc端的话 也许你...情况一:图片宽度占据整个网页宽度解决方案 对于情况一,比

    开发遇到的问题
    我们平时开发,后台通过在线编辑器,编辑帖子,上传图片,比如ckeditor配置上传图片,是可以设置图片大小的;
    在这里插入图片描述
    这种设置对pc端的话 也许你设置个 800,600,还是可以的。

    但是有没有考虑过移动端呢?
    在这里插入图片描述
    我们发现移动端的图片有一部分看不到的。

    解决方案概述
    对于图片的缩放,有两种解决方案;

    一,设置img DOM的max-width为100%;

    二,通过Js计算,来动态设置图片的宽度和高度;

    这要分两种情况,来具体采用哪种方案;

    情况一:图片宽度占据整个网页宽度解决方案
    对于情况一,比如移动端,图片是占据整个网页宽度的,这种比较好解决;

    我们加img css样式即可;

    img{width:100%; max-width:100%;}
    注意点:
    使用这种方式,编辑器添加的图片不能设置height,否则高度不能等比例的缩小,图片会变形;

    如下图:
    在这里插入图片描述
    上面没有设置 高度,下面的设置了高度;
    在这里插入图片描述
    用了max-width,虽然宽度都正常缩放了,但是高度的话,下面那个设置了height属性的,就变成了,没有和宽度一起等比例缩放;

    情况二:图片宽度未占据整个网页宽度解决方案
    对于大多数pc端,我们一般都是左右两块或者三块,所有图片的话,一般是不占据整个网页宽度的;如下图:
    在这里插入图片描述

    这里我们分成左右两块,我们如果上传了一个大图,不做等比例缩小处理的话,就会超过我们设置的左边区域的宽度,这样用户体验比较差;

    这种情况我们不能用max-width,只能用js进行计算,动态修改img的宽度和高度;

    如何来进行计算呢?

    我们这里考虑两种情况,如下图:
    在这里插入图片描述
    一种是 没设置宽度高度,就纯img,还有一个是设置了宽度高度,有一个 style内联样式;

    所以我们设计通用js方法的时候,需要传入三个参数,maxwidth,maxheight,还有一个是某个DOM里面的img;

    我们规定好最大的宽度,最大的高度,和指定范围内的图片;

    接下下方法具体实现,我们通过 getElementsByTagName(‘img’) 可以指定DOM里的所有图片,然后遍历所有图片,

    对每个图片的高度和宽度进行判断,是否超过设置的最高高度和宽度,假如超过了,我们就要通过等比例计算,把缩小后的宽度对应的高度进行计算,以及对缩小后的高度对应的宽度进行计算;

    当然最终设置图片的height和widht的时候,我们记得也要重新设置下style内联样式;

    完整实现代码:

    function ResizeImages(maxwidth,maxheight,targetDom)
    {
       var myimg,oldwidth,oldheight;
    
       var imgs = document.getElementById(targetDom).getElementsByTagName('img');   //如果你定义的id不是article,请修改此处
    
    
       for(i=0;i<imgs.length;i++){
         myimg = imgs[i];
    
    
         if(myimg.width > myimg.height)
         {
             if(myimg.width > maxwidth)
             {
                oldwidth = myimg.width;
                myimg.height = myimg.height * (maxwidth/oldwidth);
                myimg.width = maxwidth;
                myimg.style.cssText="height:"+myimg.height * (maxwidth/oldwidth)+"px;width:"+maxwidth+"px";
             }
         }else{
             if(myimg.height > maxheight)
             {
                oldheight = myimg.height;
                myimg.width = myimg.width * (maxheight/oldheight);
                myimg.height = maxheight;
                myimg.style.cssText="height:"+maxheight+"px;width:"+myimg.width * (maxheight/oldheight)+"px";
             }
         }
       }
    }
    

    调用的话 body onload里即可;

    这样就页面显示图片就协调多了;

    最佳实践
    在线编辑器,不设置widht和height;

    pc端通过js计算,动态设置;

    wap端设置max-width即可;

    最佳实践,完美解决;

    展开全文
  • C# Winform项目中,有个webBrowser控件,大小为:900*540。webBrowser控件中内嵌的网页大小为...怎么样让网页的整体内容缩小到90%后再嵌入到webBrowser控件中显示呢? 请问,能不能提供相关的源码或参考资料。谢谢!
  • 网页采用横向布局,每一个大的横向板块用一个弹性盒子包起来,这样无论屏幕怎么缩小,中间的内容区始终占窗口的百分之80,不会造成排版混乱 第二种,css代码为 width:1200px; margin:0 auto; 这种是给屏幕中间的内容...

    有两种方法,两种方法的展现效果也截然不同
    第一种,css代码为
    width:80%;
    margin:0 auto;

    网页采用横向布局,每一个大的横向板块用一个弹性盒子包起来,这样无论屏幕怎么缩小,中间的内容区始终占窗口的百分之80,不会造成排版混乱
    第二种,css代码为
    width:1200px;
    margin:0 auto;
    这种是给屏幕中间的内容区一个宽度,这里设置成1200比较美观,然后marginLeft交给margin:auto来自动调,无论比例怎么缩小,窗口怎么变化,左右两边的边距永远都是相等的,这种布局屏幕比例缩放起来会比较美观。

    展开全文
  • 原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例"未满足需求时满足需求之前,登陆框的 margin-top 以及 margin-left 的值用的都是精确px(像素值);整体页面css(审查元素)把浏览器窗口...
  • 网页图片变形解决方法-固定宽度高度按比例自动缩小CSS代码 今天有个客户说网站改版后缩略和大图都有点变形,于是我就去分析了一下原因。主要有如下的问题:1、缩略图变形那是因为之前的缩略的高宽比例和新改版后的...
  • <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/>...图片缩小不变形实例www.divcss5.com</title> <style> .divcss5{border:1pxsolid#000;width:300...
  • 有很多人问到,在网站应用中,由于图片是后台增加的,图片的宽度和高度大小都不一致,如何使图片在前台显示的大小都保持一至,且不能变形(就像windows图片文件夹里的缩略图一样)。对于这个问题,下面有两种很简单...
  • 图片缩小后按原来的比例显示

    千次阅读 2006-06-09 13:33:00
    //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){  var image=new Image();  //var iwidth = 80; //定义允许图片宽度  //var iheight = 80; //定义允许图片高度  image.src=...
  • iframe的大小定了,如何让网页比例显示在iframe里,并且不出现滚动条
  • 1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) and (max-width: 640px) { div{ width: 100px; ...
  • 那么本篇文章就给大家介绍关于css 图片等比例缩放即css图片等比例显示的问题。希望对有需要的朋友有所帮助。css图片等比例显示具体代码示例如下:css图片等比例显示代码示例.demo1-1 {float: left;width: 200px;...
  • <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="vi...
  • 本文向大家描述一下如何使用CSS属性同比例缩小图片,一般情况下如果要把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。符合Web标准!CSS同比例缩小图片当然,生成...
  • 纯js获取前端网页缩放比例方法 //获取当前页面的缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== ...
  • 1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) and (max-width: 640px) { div{ width: 100px; ...
  • webBrowser 网页放大缩小

    热门讨论 2011-06-03 14:11:03
    webBrowser 网页放大缩小 开发浏览器
  • 网页比例缩放的时候 导致有些 宽度不满屏幕: 导致这种情况,直接在 html{ position: absolute; 设置绝对定位就可以了,记得不需要写适应的meta
  • div背景图片等比例缩小如何居中

    千次阅读 2019-07-10 11:59:34
    有时候我们想通过CSS使背景图片background-image居中显示,但是发现CSS语法并没有提供background-align:center这样的用法,这篇教程详细地讲解了CSS背景图片background-image缩放如何居中显示,分为两种情况:①背景...
  • android中WebView加载网页居中显示

    万次阅读 多人点赞 2014-07-11 17:26:55
    用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小,但这种方法有缺陷,有时候会让你的页面布局扭曲( 不推荐使用 )。 方式二: //设置载入页面自适应手机屏幕,居中显示 ...
  • 怎么设置,能使得jsp页面各个模块区域在网页比例缩放的时候,还是保持原样?
  •  ScaleType.FIT_CENTER:ImageView的默认状态,大图等比例缩小,使整幅图能够居中显示在ImageView中,小图等比例放大,同样要整体居中显示在ImageView中。  ScaleType.FIT_END:缩放方式同FIT_CENTER,只是将图片...
  • div css布局中CSS图片大小自动按比例比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 ...
  • 将pc端的网页自适应显示在移动端

    万次阅读 2018-08-03 16:42:06
    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版(ios默认的是980px,Android4.0...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,067
精华内容 5,226
关键字:

如何缩小网页显示比例