A large image (over ~ 420 pixels wide) will increasingly dominate the document as the viewport shrinks down, as its native size is greater than the width of most smartphones.This works well, as with a few limitations: Images with this CSS will display at their native dimension so long as there is enough room in the HTML container to do so as the browser window narrows, the images will scale to fit, as you can see in the illustration above. Comparison of max-width scaled image with narrowed browser window The most common relative solution is to set the max-width of the image at 100%:

One way around this is to size images in relative units, rather than absolute pixel dimensions. This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. I’ve covered the basics of media queries in past articles now it’s time to look at fluid images, a technique first suggested by Ethan Marcotte.

JavaScript, often triggered by window.matchMediaĪ responsive site may utilize one, some, or all of these technologies, depending on the intentions of its designers.

Fluid layout techniques, including flexbox, percentage units, and (in the near future) CSS Grids.

“Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users.

Fluid image bootstrap tutorial