獲取圖片的原始尺寸，適應不同的樣式

weakish 發布于2019-08-30 15:44 / 1487人閱讀

摘要：總的過程分為以下幾步生產正方形的塊獲取圖片的原始尺寸，選擇適應的樣式一生產正方形的塊運用生成塊的方法很多，我用的是的方法。

最近在做項目的過程中，需要把圖片正方形展示出來，多余的部分進行裁剪。但是從后端接口拿過來的圖片可能有各種各樣的形狀。把自己實現的過程分享出來，大家有不滿的，歡迎批評指導。
總的過程分為以下幾步：
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云服務器云服務器圖片原始尺寸獲取圖片尺寸原始尺寸不同的服務器圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116089.html

獲取圖片的原始尺寸，適應不同的樣式

摘要：總的過程分為以下幾步生產正方形的塊獲取圖片的原始尺寸，選擇適應的樣式一生產正方形的塊運用生成塊的方法很多，我用的是的方法。最近在做項目的過程中，需要把圖片正方形展示出來，多余的部分進行裁剪。但是從后端接口拿過來的圖片可能有各種各樣的形狀。把自己實現的過程分享出來，大家有不滿的，歡迎批評指導。總的過程分為以下幾步： 1、生產正方形的塊 2、獲取圖片的原始尺寸，選擇適應的樣式一、生產...

fnngj 2019-08-26 10:13 評論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