[英]Scale images match css selector relative to their size
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: 似乎只有javascript才有可能:
width
scale images relative to the current line witdth 相对于当前行的width
比例图像的css技巧 transform
leave empty space 带有transform
CSS技巧留下空白 I found a js function which scales an image down here : 我找到了一个js函数,可在此处按比例缩小图像:
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: 我使用jQuery 1.11,类似这样:
// 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));
) (这是较大的一部分(function ($) { }(window.$jqTheme || window.jQuery));
)
Edit : 编辑 :
img.math
is just an inline image. img.math
只是一个内嵌图像。 While div.math img
is a numbered math equation: it also contains the equation number, which is span
floated to the right. div.math img
是一个带编号的数学方程式:它也包含方程式编号,其span
浮动在右侧。
Edit 2 : Complete html section sample 编辑2 :完整的html部分示例
The html involved is pretty basic: 所涉及的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>
All images staically positioned: img.math
is just an inline image, while div.math img
is horizontally centered in a div. 所有图像静态放置: img.math
只是一个内嵌图像,而div.math img
在div中水平居中。
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;
我已经删除了这一行this.height/=2;
because the OP stated that it was causing his images to deform. 因为OP指出这导致他的图像变形。
I've added the line this.style.height='auto';
我添加了这一行this.style.height='auto';
as suggested by @MorganFeeney. 如@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';
另外,正如OP所指出的,需要设置this.style.verticalAlign='middle';
. 。
If you are having problems with alignments, this might help. 如果您在对齐方面遇到问题,这可能会有所帮助。 Or you can try the values inherit
or top
. 或者,您可以尝试使用值inherit
或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? 为此,我建议阅读如何使用javascript或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(){});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.