- Shortcode Generator
- Accordions
- Alerts
- Animations – Attention Seeker
- Animations
- Animations – Bouncing Entrance
- Animations – Fading Entrance
- Animations – Fading Exit
- Animations – Lightspeed
- Animations – Bouncing Exit
- Shortcodes
- Block & Pull Quotes
- Buttons
- Columns
- Dividers
- Dropcaps
- Flexslider
- Google Maps
- Icons
- Messages
- Pricing Table
- Recent Posts
- Recent Projects
- Responsive Display
- Responsive Image
- Responsive Video Embeds
- Social Sharing
- Styled List
- Styled Table
- Tabs
- Toggles
- Typography
Responsive Image
Images that automatically resize themselves
The [image] shortcode lets you insert an image that automatically resizes to fill its parent container. The idea is that you can add an image to a page and have it display correctly on all devices - desktop, tablet and mobile. Resize the window and watch as the image below resizes correctly. You can also click it to launch lightbox.
Get The Code
[image src="http://path/to/my/image.png" width="980" height="440" title="Image Title" autosize="true" lightbox="true"]
Customization Options
- src – the URL of the image you want to display
- width – the width and height will be used to maintain the aspect ratio of the image as it is resized
- height – the width and height will be used to maintain the aspect ratio of the image as it is resized
- title – the title of the image
- autoresize – whether or not you want the responsive autoresize to run
- lightbox – whether you want lightbox to launch if the image is clicked
- clickthrough – whether you want to navigate to the image URL when the image is clicked