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

Adjust image size to suit baseline grid in CSS

本文关键字：CSS 基线 网格 图像 调整      更新时间：2023-09-26

我在一个网站上工作，设置基线为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);
});
相关文章：