search

andismith / grunt-responsive-images

Produce images at different sizes for responsive websites.
http://www.andismith.com/grunt-responsive-images/
MIT License
719 stars 96 forks source link

Resize image based on webpage max-width #120

Closed monish001 closed 7 years ago

monish001 commented 7 years ago

Context/Scenario

I have 2 images on a webpage - logo.png that is given 10% width and hero-image.png that is given 100%. Also, the max-width for the webpage is set to 1000px.

Can I generate following images:

logo_10pc@1000.png (result 100px wide) logo_10pc@1000_2x.png (result 200px wide) hero-image_100pc@1000.png (result 1000px wide) hero-image_100pc@1000_2x.png (result 2000px wise)

In other words, how about giving an option where we specify width in pc taken by each image on a webpage?

andismith commented 7 years ago

There isn't currently an option that can do this. But you could configure this by setting a maxWidth variable in your Gruntfile and then doing a calculation on this within GRI (Grunt Responsive Images).

For example:

At top of Gruntfile.js

var maxWidth = 1000;

In configuration of GRI for 50% of the width:

sizes: [{
  name: 'resized',
  width: maxWidth/100 * 50 + 'px'
}]

Hope that helps?