Making Images Responsive

The Rules

To Add an Image to a Page and Make it Responsive

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 this site.

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%;
display:block;
float:none;
margin: 1% auto;
border: none;
box-shadow:none }

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