: How can I determine the dimensions of an image as it appears on a website? I am trying to find the size of the image that was used as a banner on this website: http://www.deadmau5.com/. I

@Carla748

Browser based line guide extensions can be used as well to get the dimensions
like Page Liner on Chrome

Vote Up Vote Down

@Hamaas979

You can use Chrome developer tool to find out current dimension and original dimension of an image.
Open the page, hit F12 (Developer tools) and inspect the element using the magnifying glass icon in the top left of the Dev tool view. Once you know which <img> element you need, just scroll to the bottom of the right pane in the tool view. You'll get the pictorial graph of the dimension, it's margins and paddings and borders (In short the DOM model of the element)

Here's the example using my website -


Have a look at the Inspect element button and Dimension view in the red circles.

Vote Up Vote Down

@Hamaas979

Another way is to have Developer Tools open on Chrome (or the equivalent on FF/IE) before visiting the page and it will show you the files loaded on the Network tab.

Then just click the banner file and it will show you its properties, including its dimensions.

Vote Up Vote Down

@Tiffany317

You mean the one at the top that says "deadmau5" in large green letters? It's this image, which is 960 × 175 pixels, but the actual element that uses the image as its background is only 926 pixels wide, so 34 pixels from right side of the image are cut off.

How did I find it? I used Firebug and just right-clicked the banner and selected Inspect Element from the pop-up menu. That showed me the HTML element (which is just <div class="sectionColor logoBlock">&nbsp;</div>) and the CSS styles that apply to it, which include this:



.logoBlock {
background-image: url("../../../wp-content/uploads/2011/logos/deadmau5-11.png");
background-position: left top;
background-repeat: no-repeat;
height: 175px;
margin: 0 0 1px;
overflow: hidden;
padding: 0;
width: 926px;
}


BTW, nowadays both Firefox and Chrome include this inspection functionality out of the box, as part of their built-in developer tools, so you no longer even need an extension like Firebug to do this.

Vote Up Vote Down