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

Answer 2

您可以尝试使用'％'来改变宽度。

img{
    height: auto;
    width: 22%; /* or what ever you want it to be */
}