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

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

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

最近在做项目的过程中，需要把图片正方形展示出来，多余的部分进行裁剪。但是从后端接口拿过来的图片可能有各种各样的形状。把自己实现的过程分享出来，大家有不满的，欢迎批评指导。
总的过程分为以下几步：
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%;
}

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

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

转载请注明本文地址：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
Web网页布局的主要方式

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

widuu 2019-08-05 17:57 评论0 收藏0