Scale images match css selector relative to their size

Question

I have to scale down images which match the following selectors:

img.math
div.math img

The problem is that I have to scale images down twice their own size — that is relative to their own size. It seems that it is only possible with javascript:

• css tricks with width scale images relative to the current line witdth
• css tricks with transform leave empty space

I found a js function which scales an image down here :

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

the problem now is to apply that function to image matching the above mentioned selectors.

I use jQuery 1.11 and something like this is due:

// resize all math images:
$(document).ready(function() {
    $("img.math").each(function() {
        // ???
    });
    $("div.math img").each(function() {
        // ???
    });
});

(this is a part of the larger (function ($) { }(window.$jqTheme || window.jQuery)); )

Edit :

img.math is just an inline image. While div.math img is a numbered math equation: it also contains the equation number, which is span floated to the right.

Edit 2 : Complete html section sample

The html involved is pretty basic:

<div id="math" class="section">
  <span id="id1"></span><h1>Math</h1>
  <p>In-line equation: <img alt="a^2+b^2=c^2" src="_images/math/ee657daf07808119b97144fc459a5dc8839eb9c9.png" class="math">.</p>
  <p>Numbered equation:</p>
  <div id="equation-pythag" class="math">
    <p><span class="eqno">(1)</span><img alt="a^2 + b^2 = c^2" src="_images/math/53158707cc080d32d0d2f081e4bf5c6988f437ca.png"></p>
  </div><p>Link to equation: <a href="#equation-pythag">(1)</a>.</p>
</div>

All images staically positioned: img.math is just an inline image, while div.math img is horizontally centered in a div.

Answer 1

This is not enough information to post in a comment, but it isn't enough for an answer.

Still, I will answer it.

Your code has to be rewritten to the following:

// resize all math images:
$(function() {
    $("img.math, div.math img").each(function() {
        this.width/=2;
        this.style.height='auto'; //ensures proportion
        this.style.verticalAlign='middle';
    });
});

All that boilerplate code can be safely eliminated.

I've removed the line this.height/=2; because the OP stated that it was causing his images to deform.

I've added the line this.style.height='auto'; as suggested by @MorganFeeney.
It helps to ensure proportion to the image resize, in case an height it set.

Also, as the OP pointed out, it was needed to set this.style.verticalAlign='middle'; .
If you are having problems with alignments, this might help. Or you can try the values inherit or top .

This method can be a little inaccurate in some situations.
For that, I recommend reading How do I get natural dimensions of an image using javascript or jquery? to get the original width and height of your image.
Also, you can read this interesting comment for a cross-browser solution.

---

As a side note:

$(function(){});

Is equivalent to:

$(document).ready(function(){});