How to get ratio of scale image, when it's autoscaled by background-cover?


Tags: jquery,css,scale

Problem :

I have some problems:

I need to bind some text to positions om image (you know, like marks on redpen.io an other services). Text is binded to big image, well, like 1900x1200px.

Then on other pages I add this image to background of element, stretched to all window:

#backg {
    width: 100%;
    height: 100%;
    background-image: 'url-to-big-image.jpg'
    background-repeat: no-repeat;
    background-size: cover;
}

And then i have troubles: I can't bind my saved marks to this element! First, I divide original height and width of element to window height and width: Qh and Qw. I take original top and left css of mark, then multiply top*Qh and Qw*left.

It works for width, but not for height! It's somehow scaled by browser, and position of elements on image doesn't match.

How can I get ratio of height scaling, to position my marks?

Thanks in advance!



Solution :

Despite the 'Hard' issue, the answer was quite simple, though not obvious :) All the matter between scales:

First, we need to find coefficients of ratio between "real" height and width of picture and shown in the background:

var imgSize = new Image();
imgSize.onload = function() {
    $('#ourdiv').css('background-image', 'url("' + imgSize.src + '")');
    h_real = this.height;
    w_real = this.width;

    q_h = h_real / $(window).height();
    q_w = w_real / $(window).width();
};
imgSize.src = 'path_to_img.jpg';

Then, divide our "real" positions of element to coef's. However,depending on whether the coefficient is greater, we should divide on another:

if (q_w > q_h)
    {
        top_d = Math.round(top_d / q_h);   
        left_d = Math.round(left_d / q_h);
    }
else
    {
        top_d = Math.round(top_d / q_w);   
        left_d = Math.round(left_d / q_w);        
    }

And voila! - all elements on same places!


    CSS Howto..

    How to distribute cell height evenly within a row spanning two cells vertically?

    How to get and set CSS class in TinyMCE editor?

    How do I change the a border-color on rollover?

    How to recreate eBay New Logo Page in HTML + CSS

    how to trim css code to just one line [closed]

    How to debug HTML5/CSS for background video in RoR app

    How center an absolute element (img) that's wider than its parent div?

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    SF2 how to import css / js?

    How to make mobile menu transition “backwards”?

    how to show button and images in one line using css

    how to position heading in the center of the page

    How to use Javascript to close css drop down menu on outside click?

    How to make a div fill up remaining horizontal space

    js Find Class Within Div + toggle CSS/Hide One Show Other

    how do i allign my div containers using css

    How to COLOR lower-roman ordered list style in html with just css?

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    how to DRY up (remove redundancy) from this css class selector declaration?

    How can I use a CSS selector to match two classes being present?

    How to implement dynamic layout columns by using the `content_for?` method?

    How to get Floating DIVs inside fixed-width DIV to continue horizontally?

    How to create a relative inline style?

    How is BBC changing colours based on temperature? CSS?

    How to make a white square around my form fields?

    How do I slow down the banner transitions on my homepage? CSS

    Need to compress CSS and JavaScript via PHP but need to know performance implications and how to implement?

    How to create an infinite easing in and out CSS animation loop?

    How to make a background using CSS gradient with flat color?