Having an incorrect aspect ratio for your project can affect the end-user experience. When you use the right aspect ratios, it ensures your images or videos are displayed as intended without stretching or loss of resolution. The relationship between its width and height determines the ratio and shape, but not the image’s actual size.Īspect ratios are a critical part of web content because images need to be uploaded at different aspect ratios for different uses, like desktop vs. This means that an image measured in centimeters will have the same aspect ratio even if it was measured in inches. For instance, a 6×4 inch image has an aspect ratio of 3:2, whereas a 1920×1080 pixel video has an aspect ratio of 16:9.Īn aspect ratio does not have units attached-instead, it represents how large the width is in comparison to the height. You’ll recognize it as two numbers separated by a colon in an x:y format.
The aspect ratio of an image or video is the proportional relationship of the width to the height. What is an aspect ratio? Let’s start there. CallbackĬalled when user selects a file in the select file input.Ĭalled when FileReader encounters an error while loading the image file.Ĭalled when image the zoom slider is enabled.Ĭalled when image the zoom slider is disabled.Don’t know which size to use for your image or video? We’ve listed common aspect ratios to help you create your next project. When set to 'reject', onImageError would be called when ezcrop loads an image that is smaller than the container.,When set to 'allow', images smaller than the container can be zoomed down to its original size, overiding minZoom option.,When set to 'stretch', the minimum zoom of small images would follow minZoom option.įollowing callbacks can be used to interact with ezcrop. When set to true, you can freely move the image instead of being bound to the container borders. if set to 1.5, the image can be zoomed to 150% of its original size.ĭetermines the zoom when an image is loaded.,When set to'min', image is zoomed to the smallest when loaded.,When set to'image'`, image is zoomed to 100% when loaded. at least one of its edges must not go smaller than the preview area.ĭetermines how big the image can be zoomed. both width and height must not go smaller than the preview area.,If set to 'fit', the image can shrink further to fit the preview area, i.e.
This options decides the minimal zoom level of the image.,If set to 'fill', the image has to fill the preview area, i.e. When set to true, you can load an image by dragging it from local file browser onto the preview area.
The ratio between the desired image size to export and the preview size.,For example, if the preview size is 300px * 200px, and exportZoom = 2, then,the exported image size will be 600px * 400px.,This also affects the maximum zoom level, since the exported image cannot be zoomed to larger than its original size. Width of background image border in pixels.,The four array elements specify the width of background image width on the top, right, bottom, left side respectively.,The background image beyond the width will be hidden.,If specified as a number, border with uniform width on all sides will be applied. Whether or not to display the background image beyond the preview area. If set, it will override the CSS property. Range input element that controls image zoom.
The HTML element that displays image preview.
0 kommentar(er)
