Блог

Я работаю над веб-сайтом с заданной базовой линией в 14 пикселей, которая затем экстраполируется на различные размеры (двойные, тройные и т.д.). Это было здорово, пока я был сосредоточен только на том, чтобы исправить текст и устранить проблемы, которые неизбежно возникают при попытке сделать это правильно.

Однако сейчас я нахожусь в затруднительном положении, поскольку пытаюсь автоматически форматировать изображения, чтобы они правильно соответствовали макету. Изображения будут в формате HTML, и я не буду иметь контроля над их физическими размерами. Каков наилучший способ убедиться, что эти изображения соответствуют моей базовой сетке?

Например, если у меня есть изображение высотой 400 пикселей, мне нужно убедиться, что оно отображается с разрешением 392 пикселя, что в 28 раз превышает базовую линию (и, следовательно, совпадает с текстом). Это должно работать независимо от размера изображения, всегда отдавая предпочтение округленной доле в меньшую сторону (т.е. 400 пикселей равно 28,57… так должно получиться 14×28). Затем ширина должна последовать его примеру.

Я рад использовать 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);
});