0

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!

Diederik Slob
  • 57
  • 7
  • Mmm... in a way. I have to get the url to the image from #map, and then I can use that to create a map object to get the dimensions from. I just hoped there was a more direct way. – Diederik Slob Jun 11 '21 at 12:43

2 Answers2

1

I think you want to know "How to get photo resolution that is the way to get your photo resolution."

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'https://images.indianexpress.com/2020/06/Assassins-Creed-759.jpg';

I think that is the answer for you.....

Sushan Fernando
  • 21
  • 3
0

OK! i can understand your problem. Your image have to higer resulation and you cant set it to your background image. Answer 1. ``

#map {
        width: 100%;
        height: 100%;
        background-image:url('test.jpg');
        background-size: 1350px;//"Enter your screen size"
        background-repeat: no-repeat;
        position: fixed;
}

`` You can enter your screen size and try it. You cant do it with this image size.resize it to your desktop size :-).

Answer 2. This methord is very useful i am useing this methord too =>

In html ->

<img src="test.jpg" id="map">

In css ->

    #map {
    width: 100%;
    height: 100%;
    position: fixed;
}

And this methord if you want to remove your background left and top margin you can use nomalized.css "https://necolas.github.io/normalize.css/".

if you want to know about more ask from me again.

Anzwer 3.

That is not good for use because all peoples are not using same screen size.

You can use thrd-party application and resize it to your pc screen size.

I think you can understand. what i am saying. My English is so bad.

Try above code.

/\Thanks for read it./\

Sushan Fernando
  • 21
  • 3
  • Thanks for the answer, but that is not my question. I want to know the dimensions of test.jpg as they are if you look at file properties, not as they are defined in css. – Diederik Slob Jun 11 '21 at 12:46