How can I scale an element like an image?

Question

When an image is scaled to percentage proportions, it retains its aspect ratio (if done correctly). I need a div to emulate this behavior.

My situation is that I need to accurately position an element in relation to an image. The image is sized to 100% of the browser width, and a variable height. I want to use pixel measurements to size and place a div exactly 800 pixels from the edge of the image, but using the image's pixels as the measurement (not the browser pixels). Is there a way to do this?

It is possible to calculate the horizontal position in percents, but vertical percentages won't work in my case.

I could use Javascript/JQuery or SASS, and those answers are welcome, but I'd prefer a pure-CSS solution.

If it doesn't make sense, here's a jsfiddle with more information: https://jsfiddle.net/ckcmrs1g/1/

@VincentG I don't think that's quite there - if you scale the window larger and smaller, you'll see how the blue box doesn't remain flush against the red border of the image. — Serlite, May 12 '16 at 19:26
I'm not quite sure, but are you looking for this effect: https://jsfiddle.net/ckcmrs1g/5/ ? — drip, May 12 '16 at 19:30
Yes true, as OP says, we have to find image's pixel instead of browser pixels for the border width — Vincent G, May 12 '16 at 19:30
Here's a very brittle solution that works nicely only because of the ratio of the border to the image width, and the image to the screen width: https://jsfiddle.net/ckcmrs1g/11/. I'm not sure how flexible you want the solution, because this one isn't flexible. At all. =P — Serlite, May 12 '16 at 19:49
@drip That's what I'm going for, yes. I need it to be able to go without percentage heights, though. — Aaa, May 12 '16 at 21:16
@Serlite Yeah, that's not really as extensible as I need. I have a LOT of elements I need to position like this, and it would take forever to calculate the ratio for every image. Thanks though! — Aaa, May 12 '16 at 21:17

score 2 · Accepted Answer · edited May 23 '17 at 11:52

I got inspired by this answer: Determine original size of image cross browser?

I tweaked it a bit, put it in a function and called it on load, and on resize, so the size is recalculated when the browser window is being resized.

Here's the functions code:

function fitIn10Pixels() {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      var widthRatio = $(".redbox img").width()/width;
      var heightRatio = $(".redbox img").height()/height;
      var tenFromLeft = 10*widthRatio;
      var tenFromTop = 10*heightRatio;

      $(".bluebox img").css("left",tenFromLeft+"px");
      $(".bluebox img").css("top",tenFromTop+"px");
      $(".bluebox img").css("height",$(".redbox img").height()-2*tenFromTop+"px");
      $(".bluebox img").css("width",$(".redbox img").width()-2*tenFromLeft+"px");
    };

    newImg.src = $(".redbox img")[0].src; // this must be done AFTER setting onload
}

You can take a look at the fiddle here: https://jsfiddle.net/ckcmrs1g/9/

BEAUTIFUL! With some modifications, this worked perfectly. Quick question though (I'm not great at JS): What's this line? `newImg.src = $(".redbox img")[0].src;` The closest I can think of is that it deals with the ``'s source, but I'm wondering why that's necessary (and what's up with the array at the end)? — Aaa, May 12 '16 at 21:56
Never mind, actually. Just figured it out (setting the source to the redbox via jquery). Thanks! — Aaa, May 12 '16 at 22:05

How can I scale an element like an image?

1 Answers1