获取图片的原始尺寸，适应不同的样式

fnngj 发布于2019-08-26 10:13 / 2049人阅读

摘要：总的过程分为以下几步生产正方形的块获取图片的原始尺寸，选择适应的样式一生产正方形的块运用生成块的方法很多，我用的是的方法。

最近在做项目的过程中，需要把图片正方形展示出来，多余的部分进行裁剪。但是从后端接口拿过来的图片可能有各种各样的形状。把自己实现的过程分享出来，大家有不满的，欢迎批评指导。
总的过程分为以下几步：
1、生产正方形的块
2、获取图片的原始尺寸，选择适应的样式

一、生产正方形的块

运用css生成块的方法很多，我用的是padding的方法。

.box{
    width:100%;
    padding-bottom:100%; // 定义基于父元素宽度的百分比下内边距
    height:0; // 去除多余的高度 保证是正方形
    overflow: hidden; //多余的部分进行裁剪
    /* 不管图片的尺寸是多大 都进行居中显示 */
    display: -webkit-flex; /* Safari */
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

二、获取图片原始尺寸，根据宽高选择合适样式

首先判断图片是否被浏览器缓存，缓存的话，直接获取原始尺寸，没有缓存的话，需要先加载图片，加载完成以后获取图片原始尺寸。

let newImg = new Image() // 创建图片
newImg.src = "url" // 图片的url
if (newImg.complete) { // 图片是否存在与浏览器缓存
  // 判断图片的宽高 选择合适的样式
  if (newImg.width > newImg.height) {
    document.getElementById("").setAttribute("class", "imgHeight")
  } else {
    document.getElementById("ID").setAttribute("class", "imgWidth")
  }
} else { // 图片不在浏览器中
  newImg.onload = () => { // 图片加载完成 获取宽高
    // 判断图片的宽高 选择合适的样式
    if (newImg.width > newImg.height) {
      document.getElementById("ID").setAttribute("class", "imgHeight")
    } else {
      document.getElementById("ID").setAttribute("class", "imgWidth")
    }
  }
}

样式：

.imgWidth{
  width: 100%;
  height: auto;
}
.imgHeight{
  width: auto;
  height: 100%;
}

云服务器 GPU云服务器图片原始尺寸获取图片尺寸原始尺寸不同的服务器图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105792.html

获取图片的原始尺寸，适应不同的样式

摘要：总的过程分为以下几步生产正方形的块获取图片的原始尺寸，选择适应的样式一生产正方形的块运用生成块的方法很多，我用的是的方法。最近在做项目的过程中，需要把图片正方形展示出来，多余的部分进行裁剪。但是从后端接口拿过来的图片可能有各种各样的形状。把自己实现的过程分享出来，大家有不满的，欢迎批评指导。总的过程分为以下几步： 1、生产正方形的块 2、获取图片的原始尺寸，选择适应的样式一、生产...

weakish 2019-08-30 15:44 评论0 收藏0
构建自适应的手机页面

摘要：从事开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成熟的网站，分享出来，欢迎拍砖。从事PC Web开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成...

itvincent 2019-08-21 10:30 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

blastz 2019-08-30 13:50 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

shiina 2019-08-01 17:52 评论0 收藏0