成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

weakish / 1497人閱讀

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

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

一、生產(chǎn)正方形的塊

運用css生成塊的方法很多，我用的是padding的方法。 


    

.box{
    width:100%;
    padding-bottom:100%; // 定義基于父元素寬度的百分比下內(nèi)邊距
    height:0; // 去除多余的高度 保證是正方形
    overflow: hidden; //多余的部分進行裁剪
    /* 不管圖片的尺寸是多大 都進行居中顯示 */
    display: -webkit-flex; /* Safari */
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

二、獲取圖片原始尺寸，根據(jù)寬高選擇合適樣式

首先判斷圖片是否被瀏覽器緩存，緩存的話，直接獲取原始尺寸，沒有緩存的話，需要先加載圖片，加載完成以后獲取圖片原始尺寸。
let newImg = new Image() // 創(chuàng)建圖片
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%;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116089.html

相關(guān)文章

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

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

    fnngj 評論0 收藏0

  • 構(gòu)建自適應的手機頁面

    摘要：從事開發(fā)好多年，但是手機頁面開發(fā)較晚，所以最開始的時候，為了做微信應用的開發(fā)，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成熟的網(wǎng)站，分享出來，歡迎拍磚。 從事PC Web開發(fā)好多年，但是手機頁面開發(fā)較晚，所以最開始的時候，為了做微信應用的開發(fā)，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成...

    itvincent 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    blastz 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    shiina 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<