精华内容
下载资源
问答
  • 今天遇到一个问题,要求图片大小不能超过4096 * 4096,如果超过此大小,需要进行压缩处理,为了不让图片失真,所以需要根据图片的宽高比来进行压缩。...2. 计算宽高比 3. 对比宽高,找出最大值,重新计...

      今天遇到一个问题,要求图片大小不能超过4096 * 4096,如果超过此大小,需要进行压缩处理,为了不让图片失真,所以需要根据图片的宽高比来进行压缩。

    思路

    为使图片不失真,所以要根据宽高比来计算新宽高,求出宽高的最小公约数,然后减小公约数的值,使新公约数乘以宽高比小于最大尺寸。

    实现步骤:

    1. 获取宽高的最小公约数

    2. 计算宽高比

    3. 对比宽高,找出最大值,重新计算公约数

    4. 根据新得到的公约数和宽高比来计算图片的宽高

    /**
     * 计算压缩图片的宽高
     */
    public void getCompressPicSize(){
        int gcd = getGCD(curPicWidth,curPicHeight);
        int ratioW = curPicWidth  / gcd;
        int ratioH = curPicHeight  / gcd;
        int newGCD;
        if(curPicWidth > curPicHeight){
            newGCD =  getOptimumGCD(ratioW);
        }else {
            newGCD = getOptimumGCD(ratioH);
        }
        int compressPicWidth =  newGCD  * ratioW; // 压缩后的宽高
        int compressPicHeight =  newGCD  * ratioH;
        Log.e("输出结果:", "最小公约数"+ gcd +"\n 比例为:" + ratioW +":"+ ratioH+"\n 新公约数为:" + newGCD +"\n 新宽高为:" + compressPicWidth +"-"+ compressPicHeight ); 
    }
    /**
     * 获取最小公约数
     * @param w 宽
     * @param h 高
     * @return
     */
    public int getGCD(int w,int h){
        int result = 0;
        while (h != 0){
            result = w % h;
            w = h;
            h = result;
        }
        return w;
    }
    /**
     * 计算出最佳公约数
     * @param ratio
     * @return
     */
    public int getOptimumGCD(int ratio){
        return  picMaxWH / ratio;
    }

     

    转载于:https://www.cnblogs.com/Ayinger/p/11078110.html

    展开全文
  • .net 缩略图 1: #region 生成缩略图 2: 3: /// <summary> 4: /// 生成缩略图 5: /// </summary> 6: /// <param name="originalImage...

    .net 缩略图

     1:  #region 生成缩略图
     2:   
     3:          /// <summary>
     4:          /// 生成缩略图
     5:          /// </summary>
     6:          /// <param name="originalImagePath">源图路径(物理路径)</param>
     7:          /// <param name="thumbnailPath">缩略图路径(物理路径)</param>
     8:          /// <param name="width">缩略图宽度</param>
     9:          /// <param name="height">缩略图高度</param>
    10:          /// <param name="mode">生成缩略图的方式</param>    
    11:          public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height,
    12:                                           string mode)
    13:          {
    14:              Image originalImage = Image.FromFile(originalImagePath);
    15:   
    16:              int towidth = width;
    17:              int toheight = height;
    18:   
    19:              int x = 0;
    20:              int y = 0;
    21:              int ow = originalImage.Width;
    22:              int oh = originalImage.Height;
    23:   
    24:              switch (mode)
    25:              {
    26:                  case "HW": //指定高宽缩放(可能变形)                
    27:                      break;
    28:                  case "W": //指定宽,高按比例                    
    29:                      toheight = originalImage.Height*width/originalImage.Width;
    30:                      break;
    31:                  case "H": //指定高,宽按比例
    32:                      towidth = originalImage.Width*height/originalImage.Height;
    33:                      break;
    34:                  case "Cut": //指定高宽裁减(不变形)                
    35:                      if ((double) originalImage.Width/(double) originalImage.Height > (double) towidth/(double) toheight)
    36:                      {
    37:                          oh = originalImage.Height;
    38:                          ow = originalImage.Height*towidth/toheight;
    39:                          y = 0;
    40:                          x = (originalImage.Width - ow)/2;
    41:                      }
    42:                      else
    43:                      {
    44:                          ow = originalImage.Width;
    45:                          oh = originalImage.Width*height/towidth;
    46:                          x = 0;
    47:                          y = (originalImage.Height - oh)/2;
    48:                      }
    49:                      break;
    50:                  default:
    51:                      break;
    52:              }
    53:   
    54:              //新建一个bmp图片
    55:              Image bitmap = new Bitmap(towidth, toheight);
    56:   
    57:              //新建一个画板
    58:              Graphics g = Graphics.FromImage(bitmap);
    59:   
    60:              //设置高质量插值法
    61:              g.InterpolationMode = InterpolationMode.High;
    62:   
    63:              //设置高质量,低速度呈现平滑程度
    64:              g.SmoothingMode = SmoothingMode.HighQuality;
    65:   
    66:              //清空画布并以透明背景色填充
    67:              g.Clear(Color.Transparent);
    68:   
    69:              //在指定位置并且按指定大小绘制原图片的指定部分
    70:              g.DrawImage(originalImage, new Rectangle(0, 0, towidth, toheight),
    71:                          new Rectangle(x, y, ow, oh),
    72:                          GraphicsUnit.Pixel);
    73:   
    74:              try
    75:              {
    76:                  //以jpg格式保存缩略图
    77:                  bitmap.Save(thumbnailPath, ImageFormat.Jpeg);
    78:              }
    79:              catch (Exception e)
    80:              {
    81:                  throw e;
    82:              }
    83:              finally
    84:              {
    85:                  originalImage.Dispose();
    86:                  bitmap.Dispose();
    87:                  g.Dispose();
    88:              }
    89:          }
    90:   
    91:          #endregion
    92:  

     

    .js缩略图显示

     1:  function DrawImage(imgD, iwidth, iheight) {
     2:   
     3:      //参数(图片,允许的宽度,允许的高度)    
     4:      var image = new Image();
     5:      image.src = imgD.src;
     6:   
     7:      if (image.width > 0 && image.height > 0) {
     8:          if (image.width / image.height >= iwidth / iheight) {
     9:              if (image.width > iwidth) {
    10:                  imgD.width = iwidth;
    11:                  imgD.height = (image.height * iwidth) / image.width;
    12:              } else {
    13:                  imgD.width = image.width;
    14:                  imgD.height = image.height;
    15:              }
    16:          } else {
    17:              if (image.height > iheight) {
    18:                  imgD.height = iheight;
    19:                  imgD.width = (image.width * iheight) / image.height;
    20:              } else {
    21:                  imgD.width = image.width;
    22:                  imgD.height = image.height;
    23:              }
    24:          }
    25:      }
    26:  }
    27:   

     

    js调用如下

    1:  <asp:Literal ID="litImg" runat="server" Visible="false"></asp:Literal>  

     

    1:  litImg.Visible = true;
    2:  litImg.Text = "<img width='200' οnlοad='DrawImage(this,400,320)' src='" + msgModel.Photourl + "'>";   

    转载于:https://www.cnblogs.com/iceicebaby/archive/2013/04/01/2994026.html

    展开全文
  • 在响应式网页设计中,保持一致的宽高比,即所谓的长宽比,对于防止布局的累积偏移至关重要。现在,有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽高比属性,有了更直接的方法来实现这一目标。 长宽...

    在响应式网页设计中,保持一致的宽高比,即所谓的长宽比,对于防止布局的累积偏移至关重要。现在,有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽高比属性,有了更直接的方法来实现这一目标。

    长宽比

    长宽比最常见的表示方式是两个整数和一个冒号,尺寸为:宽:高,或x:y。摄影最常见的长宽比是4:3和3:2,而视频和最近的消费类相机则倾向于16:9的长宽比。

    具有相同长宽比的两个图像。一个是634 x 951像素,另一个是200 x 300像素。两者的长宽比均为2:3

    随着响应式设计的到来,对于Web开发人员而言,保持宽高比已变得越来越重要,尤其是当图像尺寸不同且元素大小根据可用空间而变化时。

    保持宽高比变得重要的一些示例是:

    • 创建自适应iframe,它们是父级宽度的100%,高度应保持特定的视口比例
    • 为图像,视频和嵌入创建内在的占位符容器,以防止在项目加载并占用空间时重新布局
    • 为交互式数据可视化或SVG动画创建统一的、响应式空间
    • 为多元素组件(如卡片或日历日期)创建统一、响应的空间
    • 为不同尺寸的多个图像创建统一的响应空间(可与 object-fit 配合使用)

    Object-fit

    定义宽高比有助于我们在响应式上下文中确定媒体的大小。这个桶中的另一个工具是对象拟合属性,它使用户能够描述一个块中的对象(如图像)应该如何填充该块。此存储桶中的另一个工具是 object-fit 属性,该属性使用户能够描述块中的对象(例如图像)应如何填充该块:

    initialfill 会重新调整图像以填充空间。在我们的示例中,由于重新调整像素,这会导致图像被压扁和模糊。object-fit:cover 使用图像的最小尺寸填充空间,并根据此尺寸裁剪图像以适合该尺寸。object-fit: contain 确保整个图像始终可见,因此与 cover 相反,它采用最大边界的大小(在我们上面的例子中是宽度),并调整图像的大小,以保持其固有的纵横比,同时适应空间。object-fit: none 的情况下,图像会以其自然大小在中心位置(默认对象位置)被裁剪。

    object-fit:cover 在大多数情况下,封面往往可以确保在处理不同尺寸的图像时有一个很好的统一界面,但是,这样一来,你就会失去信息(图像在其最长的边缘被裁剪)。

    如果这些细节很重要(例如,在处理美容产品的平铺时),裁剪重要内容是不可接受的。所以最理想的情况是采用大小不一的响应式图片,适合UI空间,不需要裁剪。

    旧的技巧:使用padding-top保持宽高比

    使用padding-top在轮播中的后期预览图像上设置1:1纵横比

    为了使这些更灵敏,我们可以使用宽高比。这允许我们设置一个特定的比例大小,并将媒体的其他部分基于一个单独的轴(高度或宽度)。

    目前,一种基于图像宽度来保持宽高比的跨浏览器解决方案被人们广泛接受,被称为“Padding-Top Hack”。该解决方案需要一个父容器和一个绝对放置的子容器。然后,可以将宽高比计算为百分比以设置为 padding-top。例如:

    • 1:1长宽比 = 1/1 = 1 = padding-top: 100%
    • 4:3的长宽比 = 3/4 = 0.75 = padding-top: 75%
    • 3:2的长宽比 = 2 / 3 = 0.66666 = padding-top: 66.67%
    • 16:9的长宽比 = 9 / 16 = 0.5625 = padding-top: 56.25%

    现在,我们已经确定了宽高比值,可以将其应用于父容器。考虑以下示例:

    <div class="container">
      <img class="media" src="..." alt="...">
    </div>
    

    然后我们可以编写以下CSS:

    .container {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 宽高比 */
    }
    
    .media {
      position: absolute;
      top: 0;
    }
    

    用宽高比来维持宽高比

    使用aspect-ratio在轮播中的后期预览图像上设置1:1纵横比

    不幸的是,计算这些 padding-top 值不是很直观,并且需要一些额外的开销和定位。有了新的内在 aspect-ratio CSS属性,维护纵横比的语言就更加清晰了。

    同样的标记,我们可以用 aspect-ratio: 16 / 9 代替:padding-top: 56.25%,将 aspect-ratio 设置为指定的 width / height比例。

    使用padding-top

    .container {
      width: 100%;
      padding-top: 56.25%;
    }
    

    使用aspect-ratio

    .container {
      width: 100%;
      aspect-ratio: 16 / 9;
    }
    

    使用 aspect-ratio 而不是 padding-top 更加清晰,而且不会对 padding 属性进行大修,做一些超出其通常范围的事情。

    此新属性还增加了将长宽比设置为 auto 的功能,其中“具有固有长宽比的已替换元素将使用该长宽比;否则,该框没有首选的长宽比”。如果同时指定 auto<ratio>,则首选的长宽比是指定的 width 除以 height 的比例,除非它是一个具有固有长宽比的替换元素,在这种情况下,将使用该长宽比。

    示例:Grid中的一致性

    这对于CSS布局机制(例如CSS Grid和Flexbox)也非常有效。考虑一个列表,其中包含您要保持1:1纵横比的子级,例如赞助商图标网格:

    <ul class="sponsor-grid">
      <li class="sponsor">
        <img src="..." alt="..."/>
      </li>
      <li class="sponsor">
        <img src="..." alt="..."/>
      </li>
    </ul>
    
    .sponsor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .sponsor img {
      aspect-ratio: 1 / 1;
      width: 100%;
      object-fit: contain;
    }
    

    示例:防止布局偏移

    高宽比的另一大特点是,它可以创建占位符空间,以防止累积布局偏移,提供更好的Web Vitals。在第一个示例中,当媒体加载完成时,从诸如Unsplash之类的API加载资产会创建布局偏移。

    另一方面,使用 aspect-ratio 创建占位符以防止此布局偏移:

    img {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
    

    总结

    使用新的 aspect-ratio CSS属性,可以在多个现代浏览器中启动,在媒体和布局容器中保持适当的纵横比,变得更加简单。


    原文:https://web.dev/aspect-ratio/,作者:Una Kravets

    展开全文
  • 简化问题,我们可以理解为实现一个高度和宽度为1:2的块。 需要解决问题:  1,高度和宽度按照一定比例。  2,外容器高度和宽度不确定。  3,尽量不使用图片和脚本替代。  4,兼容移动端。 编写html XML/...
  • 问题:元素宽度随着浏览器改变时, 高度仍然保持不变,致使内部图片变形; 上下padding的值,相对于最近父级的宽 2:flex布局,未设置高的具体值的时候,其值等于子级内容最大的高度 ...css定宽高比 flex + 伪类 + p

    问题:元素宽度随着浏览器改变时, 高度仍然保持不变,致使内部图片变形;


    上下padding的值,相对于最近父级的宽
    2:flex布局,未设置高的具体值的时候,其值等于子级内容最大的高度
    3: 伪类,content为空,宽高为0,不占据位置,也不产生多余的标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css定宽高比 flex + 伪类 + padding</title>
        <style>
            .wrapper {
                width: 200px;
                background-color: pink;
                display: flex;
            }
            .wrapper:after {
                content: '';
                padding-top: 100%; // 通过计算来设置高度相对于宽度的百分比
            }
        </style>
    </head>
    <body>
        <div class="wrapper">内容</div>
    </body>
    </html>
    展开全文
  • - PAGE PAGE 2 欢迎下载 如需保持页面内容宽高比用css就可以办到实例 需求描述移动端实现横跨页面半圆类似问题实现4x4的正方形网格 简化问题我们可以理解为实现一个高度和宽度比为1:2的块 需要解决问题 1高度和宽度...
  • 1、从上图知道原始图片大小是 800 * 250,即宽高比为 3.2; 2、html 及 css 代码如下,  可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之后就知道了原来是神奇的...
  • video随浏览器窗口变化而缩放(保证宽高比,且video左下角有文字不错位)1. video原始宽高,默认锁定宽高比2. video设置fill填充,宽高随div3. video默认锁定宽高比,宽高随div4. video默认锁定宽高比,div不设置宽...
  • 感觉很多书上都没讲清楚透视投影变换的推导过程,自己推导了下,以前一直含糊的关于方形/非方形的视平面和屏幕的宽高比的问题也有了答案.本文组织如下:1.相机空间到视平面的变换 2.视平面到屏幕的变换 3.综合 4....
  • css定宽高比,很久没做过这个需求了,记得之前都是直接用js来处理的,本例运用flex + 伪类 + padding的css的实现方法,涉及到三个点。 1:上下padding的值,相对于最近父级的宽 2:flex布局,未设置高的具体值的...
  • 宽高比就是2,那么这时候把它放在宽高比为1或者3的控件上就会分别出现变窄和变宽的问题.只有在容器宽高比2的时候图片才会和原始显示效果一样.怎样解决这个问题呢?这个时候就可以创建一个能够自适应图片宽高比的父...
  • 随着iOS11和xcode9刚开始正式发布,小编也迫不及待的更新了xcode9,手机也顺利更新到iOS,也终于见到iPhone X 的真面不,看着齐刘海的样式,小编心里淡淡的忧伤,怎么适配,如何快速适配到...纯代码的宽高比适配6...
  • 针对大功率激光器散热需求,设计了大高宽比小槽道散热器,并用去离子水为工作介质对其换热性能进行实验研究。结果表明,当散热面温度为70 ℃,流量为58.2 L/h时,3 mm槽道散热器散热能力达3×106 W/m2;当流量一定时,...
  • 2)由于电视的宽高比ratio前期一般为4:3,后期为16:9;胶片的宽高比2.20:1, 2.35:1, 2.39:1, 2.55:1等,大于1.33(4:3),1.78 (16:9) 3)如何将内容合适的展示在电视屏幕上就是本文标题中提到的两种技术(16:9 在...
  • 首先宽高比这个名词的出现是因为我们的PC屏幕不是正方形的,屏幕宽度 : 屏幕高度 就是宽高比。但是我们上次搭建的相机系统的视平面是正方形的,那么当很多物体投影到视平面上后,必然最后完成的是一幅正方形的...
  • 文章目录 前言 I、Masonry以动画的形式更新约束 1.1实现方式 1.2 完整代码 II、利用dividedBy进行九宫格布局 III、Masonry约束宽高比的例子demo see also 前言 在做筛选视图的显示与隐藏的时候,经常要用到动画。...
  • 首先说下让自己的程序支持...第二种方法是和之前iPhone5的类似,比较简单,为iPhone6和6+添加两张特殊的pngiPhone6:命名:Default-375w-667h@2x.png 分辨率:750*13346+ 命名:Default-414w-736h@3x.png 分辨率:1...
  • 最开始Demo中图片选择器使用的HXPhotoPicker,后面拓展时就在HXPhotoPicker基础上添加了一些功能。 新增的功能: 1、拍照时只截取拿到标识方框中的图片。 2、从相册完成图片选择之后进入图片编辑...3、选择视频后将mo
  • 长宽有多种,它影响着摄影构图的方式。... 它可以表示为一个带冒号的数字后面跟着另一个数字,如3:2,或者是一个十进制数字,如1.50(简单地说就是长边除以短边)。 有些人甚至喜欢将长宽表示为小数,然后是冒号...
  • var scrollHeight =$('#wrapper').scrollTop();//滚动高度 console.log(scrollHeight) if( scrollHeight >= 585 && $('.player').hasClass('a1')){ ... $('.player').fadeIn(600).removeClass('a1').addClass('...
  • JS处理图片宽高

    2019-09-29 08:29:37
    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。 我们一步一步进入这...
  • Aspect ratio# Aspect ratio is most commonly expressed as two integers... The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 877
精华内容 350
关键字:

宽高比3比2