亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

獲取圖片的原始尺寸，適應(yīng)不同的樣式

weakish / 1543人閱讀

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

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

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

運(yùn)用css生成塊的方法很多，我用的是padding的方法。 


    

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

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

首先判斷圖片是否被瀏覽器緩存，緩存的話，直接獲取原始尺寸，沒(méi)有緩存的話，需要先加載圖片，加載完成以后獲取圖片原始尺寸。
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116089.html

相關(guān)文章

  • 獲取圖片的原始尺寸，適應(yīng)不同的樣式

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

    fnngj 評(píng)論0 收藏0

  • 構(gòu)建自適應(yīng)的手機(jī)頁(yè)面

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

    itvincent 評(píng)論0 收藏0

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

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

    blastz 評(píng)論0 收藏0

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

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

    shiina 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<