WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Images


Using The width Property

If the width property is set to 100%, the image will be responsive based on the upper and lower ranges:

Example

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

Note that in the above example, the picture will be larger than its original picture. We can use the max-width property to solve this problem very well.


Use the max-width property

If the max-width property is set to 100%, the picture will never be larger than its original size:

Example

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

Adding pictures to web pages

Example

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

Background Images

The background image can be resized or scaled.

Here are three different methods:

1. If the background-size property is set to "contain", the background image will scale to the content area. The picture keeps its proportions:


Here is the CSS code:

Example

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid 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:


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

Example

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
Try it yourself »


3. If the background-size property is set to "cover", the background image is expanded to be large enough so that the background image completely covers the background area. Note that this property maintains the scale of the picture, so some parts of the background image cannot be displayed in the background positioning area.

Example

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}
Try it yourself »

Different pictures are displayed on different devices

Large-sized pictures can be displayed on the large screen, but they do not display well on the small screen. We don't need to load big pictures on small screens, this will affect loading speed. So we can use media queries to display different pictures based on different devices.

The following large and small pictures will be displayed on different devices:

Example

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}
Try it yourself »

You can use the min-device-width of the media query instead of the min-width property, which will detect the device width rather than the browser width. When the browser size is reset, the picture size does not change.

Example

/* Device is less than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* Device is greater than 400px (Also equals): */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.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 »

Required for the srcset attribute, which defines the image resource.
.