Search   
zStudio CMS Help

Responsive Web Design - Images

 

 

 

Resize the browser window to see how the image scales to fit the page.

 

Using The width Property

If the width property is set to 100%, the image will be responsive and scale up and down:

 

img {

    width: 100%;
    height: auto;

 

}

 

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

 

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

 

img {

    max-width: 100%;
    height: auto;

}

 

Background Images

Background images can also respond to resizing and scaling.

 

Here we will show three different methods:

 

1. If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):

 

 

 

div {

    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;

}

 

2. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

           

 

 

 

           

 

 

 

| © WebAdelaide Studio |