I have added Position Box and then add an image to the box - is there a way/setting to force the image to autofit the image to the size of the Position box? (All most like the Autofit capability with in InDesign)
After you insert your image in the Positioned box:
Select the image
With the image selected you can go to the “Attributes” tab, which by default is on the top right side of the screen. (Next to the “Data model” tab)
On the “Attributes” tab, you can see the “Geometry” tab, next you must fill in the option “width” to 100% and “height” to 100% as well.
From there, your image will occupy 100% of the Positioned box`s space where it is inserted.
Thank you for the suggestion, but it didn’t seem to affect the outcome…I have tried to ensure I used the 100% geometry while selecting the object and also the DIV…The issue I MAY be running into is that I’m tying to downsize the image to fit the box vs. expanding the image??? Just a thought
Hello dgoss
After you set your image for width" to 100% and “height” to 100% in the box, you will need to be sure that you will manually resizing just the box and not the image. If you click on the image and try to resize it manually, it is possible that you are resizing just the image.
To be sure you are selecting just the box, you can go to the “Outline” tab, which by default is on the top left side of the screen and select just the box before resize it. You can do the same using the Breadcrumbs bar on the top of the Design workspace, which displays the element type where the cursor is located and any of its parent elements. (div > image). Click on an element in the Breadcrumbs bar to select it.
Let me know if it worked ok?
Regards
Luciano
The easiest way to achieve this is by assigning that image as a background image via a CSS stylesheet file (or via an inline style). This way you can make use of the background-size: cover; or background-size: contain; options that are identical to the autofit capabilities of InDesign.
Suggest to set an ID for that positioned box (e.g. ‘mybox’) first and add the following to your context_print_styles.css (or a custom CSS file):
#mybox{
background-image: url(../images/myimage.jpg);
background-position: center;
background-size: cover;
}
Background-size: cover; Scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
The above CSS rule assumes the image is stored in the Images folder located in the Resources panel and that the path is set via a stylesheet file located in the Stylesheets folder of the Resources panel.