CODEWITHSUNDEEP
htmlcssfrontend
Funkit
Funkit

Reputation: 111

How to properly know the displayed image size (width-height) on a website?

I tried to find the image max-width displayed on my website, in order to have the lowest size image possible.

First, measured it directly with Lightshot screenshot software (assuming I have the max screen size): Screenshot

width = 1425px

Secondly, in Chrome development tool (ctrl+shift+i) I found this by inspecting the object: Screenshot

width = 1140px

I know the first method is not "good" but I was surprised to not finding approximately the same size.

What is the proper method?

Upvotes: 1

Views: 570

Answers (4)

Funkit
Funkit

Reputation: 111

Finally found where it comes from. In windows, by default, you have a scaling by 125% of text and interface.enter image description here

Upvotes: 0

Fareed Khan
Fareed Khan

Reputation: 2923

You should be accepting the resolution that Chrome development Tool is giving to you because dev tools are the most approprate when it comes to gather the information about different elements.

If you want to find out the image max-width you just need to click to that img tag that you already did and on left panel under style you will see all the css that you have given to your image, including the max-width property.

enter image description here

If you want confirm that dev tools showing the image size is accurate or not you can use the Visbug Chrome Extension that gives you information of each element without working with dev tools.

Upvotes: 0

Jack Walker
Jack Walker

Reputation: 41

You can use dev tools of browser. Or you can use JavaScript.

<button onclick="function1()">Show Width</button>
<h1 id="id1">Height:</h1>
<h1 id="id2">Width:</h1>
<img id="id3" src="img1.jpg">

<script>
    function function1 ()
    {
        document.getElementById("id1").innerHTML = "Height: " + document.getElementById("id3").height;
        document.getElementById("id2").innerHTML = "Width: " + document.getElementById("id3").width;
    }
</script>

Upvotes: 0

i5x
i5x

Reputation: 23

You do this kindo of stuff with the dev tools (that's what they are there for ;) ), one more thing you can do is press on the mouse icon you can visually see elements and click on them to see their properties. Hope it helped, Good Luck!

Upvotes: 1

Related Questions