You can use these image-size style values in an MDriven Turnkey HTML5 client to limit how wide an image may appear; this page is for Turnkey designers choosing the display size of an image.
Image-size style values
An image-size style value controls the image's CSS max-width. A maximum width limits an image when it would otherwise be wider than the specified value; it does not state a fixed width.
| Style value | Maximum width | Use when | Example result |
|---|---|---|---|
full-size
|
No max-width is set.
|
You want the image to use the available layout space without this style imposing a width limit. | A wide product image is not capped at 400 px or 600 px by this style. |
large
|
400 px | You need a large, bounded image in a form, detail view, or other UI area. | An 800 px-wide image can display at no more than 400 px wide. |
extra-large
|
600 px | You need a larger bounded image while still preventing an oversized image from dominating the page. | An 800 px-wide image can display at no more than 600 px wide. |
Choose a value
- Use
largewhen 400 px is sufficient for users to recognize the image while preserving room for nearby fields and actions. - Use
extra-largewhen the image contains detail that benefits from a 600 px maximum width. - Use
full-sizeonly when you do not want this style to apply a maximum-width limit. Test the view with the largest expected image and at the screen widths your users use.
For example, if a user uploads an 800 px-wide image, large limits it to 400 px and extra-large limits it to 600 px. If the uploaded image is already narrower than the configured maximum width, the maximum-width rule does not require it to be enlarged.
These values concern display sizing in the Turnkey HTML5 client. They do not configure image upload, storage, file naming, or download behavior.
To make a model attribute an image, use a Blob attribute with BlobType set to Image. For an image reached through an expression, the corresponding ViewModel column may need the Eco.BlobType=Image tagged value so that Turnkey recognizes the byte array as an image. See Upload and Download Files and Images in MDriven Turnkey for those steps.
Image sizing is also relevant when an image must remain readable at a particular display size, such as a QR code. See QR-Code to drive a workflow in any MDriven Turnkey app.