| << Chapter < Page | Chapter >> Page > |
This code results in the following image:
The following CNXML code shows how to display the same image with a specific size (in this case, 250 pixels wide by 250 pixels tall):
<figure id="figure_size_adjusted"><media id="TajMahal" alt="The Taj Mahal"><image mime-type="image/jpeg"
src="TajMahal_medium.jpg"height="250"
width="250" /></media></figure>
The resulting figure is displayed below:
When specifying
width and
height , enter the value in pixels. For example, the code above will produce a print image that is 250 pixels tall and 250 pixels inches wide.
height and
width of an image. If you supply only one of these, the other value will be calculated to preserve the same height-width ratio as the original image. You only need to supply both when you wish to change the shape of the image.height and
width attributes do not affect the size of the image in the print (PDF) version of the module. To change the printed size of the image, use the
print-width attribute (see below). You can use any combination of print and online sizing attributes for an image.You can adjust the size of the image in the print (PDF) version of your document by using the
print-width attribute. The height of the image will be adjusted proportionately to the width set in
print-width . There is no
print-height attribute.
The following CNXML code shows how to display the Taj Majal image above with a specific printed size (in this case, 4.5 inches wide):
<figure id="figure_size_adjusted"><media id="TajMahal" alt="The Taj Mahal"><image mime-type="image/jpeg"
src="TajMahal_medium.jpg"print-width="4.5in" /></media></figure>
When specifying
print-width include the unit of measurement in the value. This can be
in (inches),
cm (centimeters),
pt (points) or
any other value supported in LaTeX . The code above will produce a print image that is 4.5 inches wide and a height proportional to its original dimensions.
print-width attribute does not affect the size of the image when viewing the version of the module. To change the online size of the image, use the
height and
width attributes. You can use any combination of print and online sizing attributes for an image.A thumbnail is a small version of an image that, when clicked, displays the larger, full-size version of that image. You can create a thumbnail in your modules by completing the following steps:
media and
image elements as you would normally do for a full-sized image.thumbnail attribute to the
image element as shown in the example below.<figure id='thumbnail'><media id="thumbnailmedia" alt="The Taj Mahal (thumbnail version)"><image mime-type='image/jpeg'
src='TajMahal_medium.jpg'thumbnail='TajMahal_Thumb.jpg'/></image></media></figure> This code results in the following linked image:
Notification Switch
Would you like to follow the 'Ideas and tools for improving connexions modules and collections' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|