Расчет полного размера изображения - PullRequest
Новая
       43

Расчет полного размера изображения

4 голосов
/ 23 марта 2011

Эй, ребята, Я пытаюсь написать функцию JavaScript, которая будет расширять изображение, чтобы заполнить div всегда (так, чтобы обрезать верх или стороны по мере необходимости). Это JavaScript-код CSS3-кода background-size: cover.

Я не могу на всю жизнь понять это. Это то, что я до сих пор: 

    function full_bleed(box_width, box_height, new_width, new_height) 
    {
        var aspect_ratio=new_width/new_height;

        if(new_height<box_height) {

            new_height=box_height;
            new_width=Math.round(new_height*aspect_ratio);            

        }

        if(new_width<box_width) {

            new_width=box_width;
            new_height=Math.round(new_width/aspect_ratio);
        }

        return {
            width: new_width, 
            height: new_height
        };

    }

Я подумал, что у одного из вас, ребята, может быть уравнение.

Спасибо!

Ответы [ 2 ]

4 голосов
/ 24 марта 2011

Благодаря комментарию Бена я понял это. 

full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) 
{
    // Calculate new height and width
    var initW = imgWidth;
    var initH = imgHeight;
    var ratio = initH / initW;

    imgWidth = boxWidth;
    imgHeight = boxWidth * ratio;

    if(imgHeight < boxHeight){
        imgHeight = boxHeight;
        imgWidth = imgHeight / ratio;
    }

    //  Return new size
    return {
        width: imgWidth,
        height: imgHeight
    };

}
0 голосов
/ 29 мая 2014

Я внес некоторые изменения в решение Дрю, чтобы лучше соответствовать моим потребностям.

function calculateCover(frame, sides) {
    var ratio = sides[1] / sides[0],
        cover = { 
            width: frame.width,
            height: Math.ceil(frame.width * ratio) 
        };

    if (cover.height <= frame.height) {
        cover.height = frame.height;
        cover.width = Math.ceil(frame.height / ratio);
    }

    return cover;
}

calculateCover({width: 1280, height: 822}, [16,9]);

Идея та же, но смысл здесь в том, чтобы рассчитать увеличенный размер без начального размера носителя, вместо этого используя заданное соотношение сторон.Я использую его для встраивания видео, а не изображений, где я загружаю видео, например, через API YouTube, и у меня нет первоначального размера, но я знаю соотношение и хочу растянуть видео на доступное пространство.(Конечно, его можно изменить обратно, чтобы рассчитать соотношение из фактических размеров видео или изображения.) Также сделаны некоторые упрощения кода.

...