Responsive images

<< Click to Display Table of Contents >>

Navigation:  Basic Working Procedures > Using Graphics >

Responsive images

Graphics are often a problem in responsive layouts designed to adapt automatically to different device sizes – from desktop monitors to hand-held smartphones. Traditionally, graphics have fixed dimensions that break responsive layouts on screens that are smaller than the graphic.

To solve this problem you need to set the width of your graphics in percent relative to the page dimensions. Then the graphic can never be wider than the page. Length is not a problem, because pages can always scroll vertically. However, you never want the page to have to scroll horizontally on mobile devices with fluid layouts.

Click to expand/collapseMaximizing quality for responsive images
Click to expand/collapseMaking images responsive with the Display Size setting
Click to expand/collapseResponsive SVG images in CHM help and older versions of Internet Explorer
Click to expand/collapseResponsive images in PDF and DOCX
Click to expand/collapseResponsive images: relative to page or table cell width