# Options with examples
See the basic usage with the filters, fit, name options to define a specific image, format and style. And examples to get to know all the options that can make you creative in using placephant.
# Basic Usage
The basic version to get an image is to add an image with the wanted width and heigth in the path.
<img src="//placephant.com/300/250"/>
If you want a square image you can use one size.
<img src="//placephant.com/300"/>
It is possible to use 0 for one of the sizes, this will result in an image that keeps the original ratio. The maximum size that you can use is a width of 2500 and a height of 2500 any size above that will be set to the maximum.
# Filters
There are two filter options:
The first option is greyscale (you can also use g or bw).
The second option is sepia.
You can add a query parameter to use a filter: <img src="//placephant.com/300/250?filter=greyscale"/> , or you can add it as first part before the sizes: <img src="//placephant.com/greyscale/300/250"/>
# Fit
With the fit option you can decide how the image will fit in the targeted size.
- contain: Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio.
- max: Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio, and will also not increase the size of the image if it is smaller than the output size.
- fill: Resizes the image to fit within the width and height boundaries without cropping or distorting the image, and the remaining space is filled with the background color. The resulting image will match the constraining dimensions.
- fill-max: Resizes the image to fit within the width and height boundaries without cropping but upscaling the image if it’s smaller. The finished image will have remaining space on either width or height (except if the aspect ratio of the new image is the same as the old image). The remaining space will be filled with the background color. The resulting image will match the constraining dimensions.
- stretch: Stretches the image to fit the constraining dimensions exactly. The resulting image will fill the dimensions, and will not maintain the aspect ratio of the input image.
- crop: Default. Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without distorting the image. See the crop page for more information.
You can add the fit as a query parameter: <img src="//placephant.com/300/250?fit=max"/> .
# Name
With the name option you can decide to get a specific image from the Current ElePHPant photo's.
You can add the name as a query parameter: <img src="//placephant.com/300/250?name=psr-8-elephpants"/> .
# Examples
- 1. <img src="//placephant.com/greyscale/100"/> .
- 2. <img src="//placephant.com/greyscale/100/100"/> .
- 3. <img src="//placephant.com/100?filter=greyscale"/> .
- 4. <img src="//placephant.com/100/100?filter=greyscale"/> .
- 1. <img src="//placephant.com/sepia/300/150"/> .
- 2. <img src="//placephant.com/300/150?filter=sepia"/> .
- <img src="//placephant.com/250/0"/> .
- <img src="//placephant.com/300/200?fit=fill"/> .
- <img src="//placephant.com/310/200?fit=stretch"/> .
- <img src="//placephant.com/320/200?fit=contain"/> .
# Credits
Placephant is a project created and hosted by Tobias van Beek.
The inspiration is from the previous project https://github.com/erikaheidi/placephant created by Erika Heidi.
The author of the Elephpant images are listed in the Current ElePHPant photos section.
This project couldn't exist with the creation of the ElePHPants by Vincent Pontier
Without PHP this website would not work and the ElePHPants would never have existed.