Question

我必须缩小与以下选择器匹配的图像：

img.math
div.math img

问题在于我必须将图像缩小两倍于自己的大小 - 这与他们自己的大小有关。它似乎只能用javascript：

css使用相对于当前行的width比例图像的技巧
使用transform leave empty space

我找到了一个js函数，它将图像缩小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;
}

现在的问题是将该功能应用于上述选择器的图像匹配。

我使用jQuery 1.11，这样的事情应该是：

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

（这是较大的(function ($) { }(window.$jqTheme || window.jQuery));）

的一部分

修改：

img.math只是一个内联图片。虽然div.math img是一个带编号的数学等式：它还包含等式编号，即span浮动到右边。

编辑2 ：完整的html部分示例

所涉及的HTML非常基本：

<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>

所有图片都是静态定位的：img.math只是一个内联图片，而div.math img则以div为中心水平居中。

Answer 1

这不足以在评论中发布信息，但这还不足以回答。

不过，我会回答。

您的代码必须重写为以下内容：

// 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';
    });
});

可以安全地消除所有样板代码。

我删除了this.height/=2;行，因为O.P。声称它导致他的图像变形。

我按照@MorganFeeney的建议添加了行this.style.height='auto'; 如果设置了高度，它有助于确保调整图像大小的比例。

另外，正如O.P.指出的那样，需要设置this.style.verticalAlign='middle'; 如果您在对齐方面遇到问题，这可能会有所帮助。或者，您可以尝试使用值inherit或top。

在某些情况下，此方法可能有点不准确为此，我建议您阅读How do I get natural dimensions of an image using javascript or jquery?以获取图片的原始宽度和高度另外，您可以阅读this interesting comment以获取跨浏览器解决方案。

作为旁注：

$(function(){});

相当于：

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

缩放图像匹配css选择器相对于它们的大小

1 个答案: