Javascript 调整图像大小以适应CSS中的基线网格

我在一个网站上工作，设定的基线为14px，然后外推到各种大小（双、三等）。这很好，而我只专注于使文本正确，并解决在尝试正确处理文本时不可避免的问题

现在我正处于一个尴尬的时刻，虽然我试图自动格式化图像，以适应正确的布局。图像将在HTML中，我无法控制它们的物理尺寸。确保这些图像符合我的基线网格的最佳方法是什么

例如，如果我有一个400px高的图像，我需要确保它以392px显示，这将是基线的28倍（因此与文本匹配）。无论图像大小如何，这都需要起作用，始终首选向下取整的分数（即400px为28.57…因此应为14x28）。宽度也应如此

---

我很高兴使用JS来实现这一点，我猜这不会是我完全可以在CSS中实现的东西，因为动态图像大小。非常感谢您的帮助

对于任何试图实现类似目标的人，一位朋友帮了我的忙，我们提出了一个解决方案，可以根据您的基线调整图像比例，如下所示

$( document ).ready(function() {
    $('img').each(function() {
        var b = 14,
            h = $(this).height(),
            x = Math.floor(h/b)*b;
        $(this).css('height',x);
    });
});

---

更改b变量以匹配您的基线，现在所有图像的大小都将调整为适合您，而不管它们有多高。唯一的问题是，如果你需要100%的宽度，那么你需要看一个掩蔽DIV，但我不需要这个特殊的项目。但是对于那些像我这样的迂腐的人来说非常有用

遵循@teknetia的想法。您可以忽略图像的高度，而动态更改边距，以便将下一位内容向下推到下一基线

$('img').each(function() {
    var b = 24,
        h = $(this).height(),
        x = (b*Math.ceil(h/b))-h;
        console.log(x);
    $(this).css('margin-bottom',x);
});