A way to find the real size of an auto-sized background image

  css, html, javascript

I have very large image that I fit into a much smaller div. I want to be able to double-click on a position on the image and then fit a part of it in its real size in the same div dimensions. I only need to know the original image dimensions. There are many ways leading to Rome, but I try to use as much pure JS as possible (learning the language is the main goal of my project). So I have this css and html, and the image is about 3000 x 4000 px.

    #map {
        
        width: 690px;
        height: 1000px;
        background-image: url('test.jpg');
        background-size:contain;
        background-repeat: no-repeat;
        margin: none;
    }    

    <div id='map'></div>

Is there a(n elegant) way to retrieve the ‘real’ dimensions of the background image? I am creating a simple map application, in case it helps answering the question.

Thanks!

Source: Ask Javascript Questions

LEAVE A COMMENT