html - CSS - <p> 内的双倍尺寸 <img>

Question

我正在使用 <img>里面的标签 <p>用于显示数学公式的标签，如下所示:

<p>Lorem ipsum dolor, <img src="my-crazy-formula.svg">, consectetur adipiscing elit.</p>

但是，当我打开文件时公式显得很小，所以我尝试使用 transform: scale(2); 来增加它们的大小.

不幸的是，它带来了另一个问题:CSS 转换不影响盒子模型，所以我尝试使用边距，但只有当公式很短时它们才有效。

所以我的问题是:如何(仅通过 CSS)增加 <img> 的大小<p> 内的标签或 <li> ？

PS:我将其用于电子书，因此使用类似 height: 100px 的内容将无法正常工作。我的 HTML 是从 Markdown 文件自动生成的。

Answer 1

如果它适用于您关心的所有浏览器/环境，我会使用:

p img, li img { zoom:2 }

演示:http://jsfiddle.net/v4m387zw/2/

---

如果做不到这一点，我认为最简单的方法是使用 jQuery 并调整它们的大小。例如(未经测试):

$(function(){
   $('p img, li img').each(function(){
     var $img = $(this);
     $img.height($img.height()*2); // assumes width not set
   });
});

如果所有元素的高度都相同(正如我想象的那样，它们可能用于内联公式)，那么您可以通过以下方式稍微简化和提高效率:

$(function(){
   var imgs = $('p img, li img');
   imgs.height(imgs.height()*2); // assumes width not set
});