如何將圖片的高度和寬度傳遞到html燈箱

Question

我在網站上使用引導燈箱實現。 為了使燈箱發揮最佳效果，我需要提供燈箱中顯示的每張圖片的實際高度和寬度。 我正在尋找一種動態提供此數據的方法，而不必對每個圖片進行編碼。 我知道您可以使用javascript獲取數據，但是我知道您不能在HTML中使用變量。 是否有一些解決方法，也許使用CSS變量？

例如（顯然這是行不通的）如何傳遞此數據大小？

<body>
  <figure class="col-md-4">
    <a href="p1.jpg" data-size=var(imgSize)>
      <img src="p1.jpg" class="img-fluid">
    </a>
  </figure>   
  <script>
    var img = new Image();
    var imgSize = this.width + 'x' + this.height;
    img.src = 'p1.jpg';
  </script>
</body>

Answer 1

嘗試將動態數據包裝在函數中，然后在屬性中調用它

    <body>
  <figure class="col-md-4">
    <a href="p1.jpg" data-size=imgSize()>
      <img src="p1.jpg" class="img-fluid">
    </a>
  </figure>   
  <script>
    var img = new Image();
    var imgSize = functions() { this.width + 'x' + this.height};
    img.src = 'p1.jpg';
  </script>
</body>

Answer 2

根據此文檔，您必須嘗試獲得的是：

data-(width|height)="[0-9]+"

這是在Jquery中編輯屬性的方法：

    $('tag').attr('data-width', valuex);
    $('tag').attr('data-height', valuey);

這樣，您可以獲取圖像大小：

var img = $('#imgid')
var width = img.width();
var height = img.height();

如何將圖片的高度和寬度傳遞到html燈箱

問題描述

2 個解決方案

解決方案1
0 2019-08-27 15:40:54

解決方案2
0 2019-08-27 15:41:07

如何將圖片的高度和寬度傳遞到html燈箱

問題描述

2 個解決方案

解決方案1 0 2019-08-27 15:40:54

解決方案2 0 2019-08-27 15:41:07

解決方案1
0 2019-08-27 15:40:54

解決方案2
0 2019-08-27 15:41:07