Transcript
In this Quick Tip, we're going to learn about the image element.
You would use the image element for a landing page, a catchy call to action, or for displaying dynamic images like the user's profile picture.
First, we must define the image source. The source can be static or dynamic. We can find free static images right within the image element property editor to help get your app started.
With static images, you can even use a cropping tool to help define its look.
We can style the image element like any other element, as well as use it to start a workflow when the image is clicked.
When you have a dynamic image, you can control how the image renders in run mode if the size of the image doesn't fit the current element. Depending on your design, you could stretch, rescale, zoom, or adjust the element height of your image element.
Stretch will resize the image to fill the entire element.
Rescale will add vertical or horizontal margins so the image stays within the boundaries of the element itself without it distorting.
Zoom will fill the entire image element. If the image and the element have different proportions, the image will be zoomed in so it can fill the space.
Adjust element height will adjust the height of the element to keep the image proportions intact.
Experiment more by adding your own static and dynamic images to your app using the image element.
That's it for this Quick Tip. For more, be sure to check out bubble.io/academy.