Responsive Image Layout

Resize window to see Responsive Web Design

View Source to see how each routine is done

Easy RWD for images in columns:

In CSS
img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; margin:18px; width:220px; text-align:center}

In HTML
One <section> containing
four <figure>s
each containing an <img src="images/monitor.jpg" alt="monitor">
each image with a <figcaption>

monitor
Image 1
monitor
Image 2
monitor
Image 3
monitor
Image 4

 

Note how banner images below keep their Aspect Ratio

Note for RWD you must add in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

RWD as URL background image in CSS:

background:url(images/bannerBridge.jpg) no-repeat center center;
background-size:cover

 

 

In CSS:
img {max-width:100%; height:auto;}

In HTML:
In Head: <meta name="viewport" content="width=device-width, initial-scale=1.0">
In Body just: <img src="images/bannerBridge.jpg">

Bridge Banner

Or use a smaller/larger image for each media query