Making Images Responsive

The Rules

If you want to add a responsive image to a page, to make it expand and contract with the width of the visiting browser:

Rule #1 Do not add the width and height measurements to your image code.
<img src="pathtoimage" width="300px" height="200px" alt="alternate text">

Rule #2 Include the line:
img {width: 100%} when used in columns or img {max-width:100%} in open spaces.

The CSS for the images on this page:
.l-img {
max-width:100%;
float:left;
margin: 2% 2%
}

.r-img {
max-width:100%;
float:right;
margin: 2% 2%
}

Image Swapping

Another method of using images in responsive design is the swapping technique. We used it in the 4 column design on the front page of our #500 series templates.

Four copies of the same image were created in different sizes. The code is placed on the web page as shown here.

Linux Users: Use the graphics program Krita from the software repository. Load the image. Choose Image. Scale Image to New Size.

The code excluding alt and title:
<img class="image1c" src="images/road-300.png">
<img class="image2c" src="images/road-250.png">
<img class="image3c" src="images/road-225.png">
<img class="image4c" src="images/road-200.png">

Media queries are then used in the style sheet at various break points to swap the images using the CSS shown below.

.image1c, .image2c , .image3c , .image4c {
width:100%; /*Adjusts to column width*/
display:block;
float:none;
margin: 1% auto;
border: none;
box-shadow:none }

@media  (max-width:650px) {
.image1c, .image2c , .image3c {display:none}
.image4c {display:block; }
}