Hidajet Tuzlak Hidajet Tuzlak - 11 months ago 99
CSS Question

Get height of responsive embedded image

I have SVG generated with d3js library. Inside SVG is appended image.
What I am trying to do is get image height, not original height but the height of image when resized to fit container (100% width).

Here is an example of my trouble:



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>





Note that height of an image will be used to set height of the whole svg element.

Here is the same snippet in jsbin: jsbin

Answer Source

There are several ways to do what you want. One of them is using getBBox():

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

Here is your code with that change:

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: This is a constructive criticism: do not mix jQuery and D3. Not only this is unnecessary, but also this can make things break silently.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download