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

Question

我在一个网站上工作，该网站的基线设置为 14 像素，然后可以推断出各种尺寸(双倍、三倍等)。这很棒，而我只专注于使文本正确无误并解决在尝试使它正确时不可避免地发生的问题。

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

例如，如果我有一个 400 像素高的图像，我需要确保它以 392 像素显示，这将是基线的 28 倍(因此与文本匹配)。无论图像的大小如何，这都需要起作用，总是更喜欢四舍五入的分数(即 400px 是 28.57...所以应该是 14x28)。宽度也应如此。

我很高兴使用 JS 来执行此操作，我猜由于动态图像大小，我无法完全用 CSS 实现它。非常感谢任何帮助!

Answer 1

对于任何试图实现类似目标的人，一位 friend 帮助了我，我们想出了一个解决方案，该解决方案将根据您的基线调整图像比例，如下所示。

$( 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，但对于这个特定元素我不需要它。不过对于像我这样对自己的基线迂腐的人来说非常有用!