Within the Fluid Designer, you can alter how images and video players display in their containers.
Elements Relative to Container
In the context of your layout, you have an element inside marquees that you can resize. Marquees are the border of a container highlighted in light blue when you click on an element.
Most elements occupy the whole area of its container. However, images and video players can be displayed in several different ways based on their Containing Property and Alignment.
Containing Properties & Alignment Options
Containing Properties are shown in a small drop-down menu in the center of the Creative Properties Bar. There are three Containing Properties for an element: Fill, Cover and Contain.
Alignment Options located right next to the Containing Properties. There are three Horizontal Alignment Options: center (default), left, right; and three Vertical Alignment Options: center (default), top, bottom.
Contain + Alignment
Contain is a default option. It displays the full image with its original proportions within the given size of a container. It will occupy either 100% of the width, or 100% of the height, depending on the proportions of the image and the container.
Alignment is set center horizontally and center vertically relative to the container on default. You can change alignment to suit your design needs.
Fill
Fill ensures that the image fills the entire container. It often stretches the width or the height of an image to match the size of the container.
This option is suitable for images of abstract shapes that could be stretched. For photographs or illustrations it’s not recommended.
When Fill if selected alignment won’t work, as an image occupies the whole space inside the container.
Cover + Alignment
An image that covers its container fills the entire space with its original proportions, without being distorted. Unlike Fill, Cover maintains an image’s proportions, and enlarges the image so it fills the container.
Alignment is set center horizontally and center vertically relative to the container on default. You can change alignment to suit your design needs.
Note: when Cover is selected, in addition to alignment you have an option to use the Focal Point.
Comments
0 comments
Please sign in to leave a comment.