Example Description
In this example you can test out the different Fit Mode API options available for images: fit, fill, and fixed width. You can use the default image or upload your own, and test how images appear in different orientations: portrait, landscape, and square. Then you can apply the fit mode option that works best for you to the images on your site.
How We Built It
Page Elements
We added the following elements to our page:
Upload button: For optionally uploading your own image
2 sets of radio buttons: For choosing the image element orientation and the fit mode.
3 image elements: portrait, landscape, and square orientation. Only 1 image displays at a time.
Code
Our code does the following:
When the page is ready, declare and set the variables representing the currently selected options to default fit mode and orientation values: ‘fill’ and ‘portrait’.
When a site visitor clicks the upload button, upload the file and set it as the source of the currently displayed image.
When a site visitor selects a different fit mode option, apply the new fit mode to the current image and update the variable storing the current fit mode.
When a site visitor selects a different orientation, do the following:
Hide the container with the currently displayed image element.
Store the value of the new orientation.
Assign the image source and current fit mode to the new image element.
Show the container with the new image element.
Note: Some fit mode options resize the image element, causing the image to change its orientation.
Related Examples
Did this help?
|
Thanks for your feedback!
Image and Text Animation
Use wix-animations API to animate images and text.
Intermediate
Hide and Show an Image
Show and hide an image according to the clicked button.
Beginner
Detect Image Labels
Use Google’s vision NPM module to detect an image’s labels.
Advanced