获取响应式嵌入图像的高度答案

【问题标题】：Get height of responsive embedded image获取响应式嵌入图像的高度
【发布时间】：2017-10-03 07:49:20
【问题描述】：

我使用 d3js 库生成了 SVG。 SVG 内部是附加图像。我想要做的是获取图像高度，而不是原始高度，而是调整大小以适合容器（100% 宽度）时的图像高度。

这是我的麻烦的一个例子：

var svg = d3.select(".preview").append("svg")
    .attr({
      width: "100%"
    })


var exampleImage = svg.append("image")
    .attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
    .attr({
      class: "example-image",
      width: "100%",
      height: "100%"
    });


var imgWidth = $(".example-image").width();
var imgHeight = $(".example-image").height();

$("h4").html(imgWidth + " x " + imgHeight);

$(document).ready(function() {
  
    $("h3").html(imgWidth + " x " + imgHeight); 
    
    var imgObj = new Image();
    
    imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
    imgObj.onload = function() {
      $("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
    }
}); 
$("h2").html("Need height of resized image appended to svg, NOT original");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="preview" style="width: 200px; height: auto;"></div>
  
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1>

请注意，图像的高度将用于设置整个 svg 元素的高度。

这是 jsbin 中相同的 sn-p：jsbin

【问题讨论】：

标签： javascript jquery css d3.js svg

【解决方案1】：

有几种方法可以做你想做的事。其中之一是使用getBBox()：

var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;

这是您的更改代码：

var svg = d3.select(".preview").append("svg")
    .attr({
      width: "100%"
    })


var exampleImage = svg.append("image")
    .attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
    .attr({
      class: "example-image",
      width: "100%",
      height: "100%"
    });


var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;

$("h4").html(imgWidth + " x " + imgHeight);

$(document).ready(function() {
  
    $("h3").html(imgWidth + " x " + imgHeight); 
    
    var imgObj = new Image();
    
    imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
    imgObj.onload = function() {
      $("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
    }
}); 
$("h2").html("Need height of resized image appended to svg, NOT original");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="preview" style="width: 200px; height: auto;"></div>
  
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1>

PS：这是一个建设性的批评：不要不要混合使用 jQuery 和 D3。这不仅是不必要的，而且可以让事情无声无息地破裂。

【讨论】：