mahnunchik / gulp-responsive

gulp-responsive generates images at different sizes
https://npmjs.com/gulp-responsive
MIT License
503 stars 60 forks source link

How to fit image to direct width & height container #140

Open mukaspc opened 4 years ago

mukaspc commented 4 years ago

Hi!

I have .png files on which I want to resize to square proportions with exact dimensions, width 400px x height 400px. The problem occurs when the width of the input image is greater than its height. The image I receive has actually set dimensions of 400px x 400px but it is adjusted according to the height and the longer sides are cut off.

I would like that when the image has other proportions (larger width than height) it will be fitted to a 400px x 400px file and the graphics will be scaled accordingly.

My configuration:

.pipe(responsive({
    '*.png': [
        {
            width: 400,
            height: 400
        }
    ]
}, 
{   
    quality: 100,
    progressive: true,
    withMetadata: false,
    withoutEnlargement: false,
    skipOnEnlargement: false,
    errorOnEnlargement: false,
    errorOnUnusedConfig: false,
    errorOnUnusedImage: false
}))

Screenshot_12

As you can see the file has a dimension of 400px by 400px but the width of the graphics is larger so the image is cut on the sides. How to set the configuration so that the file size remains and the graphics (if the proportions are different) are adjusted?

Thanks!