Using the Image Stack

The image stack in Foundation is different than you basic image stack. It has a lot of good options, you can drag and drop up to 3 images into the different drop zones (for different image sizes). There is also an option to warehouse, which also gives you three options of images sizes to choose from.

You will notice that it says the Mobile Image is required, that is because in Foundation, Mobile is first. Now, if you only want to use one image, you can, just drop it in the mobile dropzone (or link it correctly with the warehouse link) and Foundation automatically will resize the image for the appropriate device. Also, if you choose Always load mobile first? the mobile image will load before other sizes, until foundation determines what size image is needed. Other options that stack offers, is Alignment (left, right and center), Grow to Container Width? (Allows the image to grow past its original size and go as large as its container), and Define Max-Width.

Now go forth and make your websites great!