WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Images


Using The width Property

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

Example

img {
    width: 100%;
    stature: auto;
}
Try it yourself »

Notice that in the model over, the picture can be scaled up to be bigger than its unique size. A superior arrangement, as a rule, will be to utilize the max-width property instead.


Using The maximum width Property

If the max-width property is set to 100%, the picture will downsize in the event that it needs to, yet never scale up to be bigger than its unique size:

Example

img {
    max-width: 100%;
    tallness: auto;
}
Try it yourself »

Add an Image to The Example Web Page

Example

img {
    width: 100%;
    tallness: auto;
}
Try it yourself »

Background Images

Background pictures can likewise react to resizing and scaling.

Here we will indicate three diverse methods:

1. In the event that the background-size property is set to "contain", the foundation picture will scale, and attempt to fit the substance territory. In any case, the picture will keep its angle proportion (the corresponding relationship between the picture's width and height):


Here is the CSS code:

Example

div {
    width: 100%;
    tallness: 400px;
    foundation picture: url('adventure cold.jpg');
    foundation rehash: no-repeat;
    foundation estimate: contain;
    outskirt: 1px strong red;
}
Try it yourself »

2. In the event that the background-size property is set to "100%", the foundation picture will extend to cover the whole substance area:


Here is the CSS code:

Example

div {
    width: 100%;
    stature: 400px;
    foundation picture: url('adventure cold.jpg');
    foundation measure: 100% 100%;
    outskirt: 1px strong red;
}
Try it yourself »


Here is the CSS code:

Example

div {
    width: 100%;
    tallness: 400px;
    foundation picture: url('adventure cold.jpg');
    foundation estimate: cover;
    fringe: 1px strong red;
}
Try it yourself »

Different Images for Different Devices

A expansive picture can be impeccable on a major PC screen, yet pointless on a little gadget. Why load a huge picture when you need to scale it down at any rate? To decrease the heap, or for some other reasons, you can utilize media questions to show distinctive pictures on various devices.

Here is one vast picture and one littler picture that will be shown on various devices:

Example

/* For width littler than 400px: */
body {
    foundation picture: url('img_smallflower.jpg');
}

/* For width 400px and bigger: */
@media just screen and (min-width: 400px) {
    body {
        foundation picture: url('botanical-desert flora outside 212934.jpg');
    }
}
Try it yourself »

You can utilize the media inquiry min-gadget width, rather than min-width, which checks the gadget width, rather than the program width. At that point the picture won't change when you resize the program window:

Example

/* For gadgets littler than 400px: */
body {
    foundation picture: url('green-leaves-plant-1104509.jpg');
}

/* For gadgets 400px and bigger: */
@media just screen and (min-gadget width: 400px) {
    body {
        foundation picture: url('green-leaves-plant-1104509.jpg');
    }
}
Try it yourself »

HTML5 <picture> Element

HTML5 presented the <picture> component, which gives you a chance to characterize mutiple image.

Browser Support

Element
<picture> Not supported 38.0 38.0 Not supported 25.0

Example

<picture>
  <source srcset="botanical-desert flora outside 212934.jpg" media="(max-width: 400px)">
  <source srcset="botanical-desert flora outside 212934.jpg">
  <img src="adventure cold.jpg" alt="Flowers">
</picture>
Try it yourself »

The srcset characteristic is required, and characterizes the wellspring of the image.

The media characteristic is discretionary, and acknowledges the media questions you find in CSS @media rule.

You ought to likewise characterize a <img> component for programs that don't bolster the <picture> element.


.