YouTipCss Rwd Images
# Responsive Web Design – Images
* * *
## Using the width Property
If the width property is set to 100%, the image will be responsive and scale up and down:
## Example
```css
img {
width: 100%;
height: auto;
}
[Try it Yourself »](#)
Notice that in the example above, the image is bigger than the original image. We can solve this problem by using the **max-width** property.
* * *
## Using the max-width Property
If the max-width property is set to 100%, the image will never be larger than its original size:
## Example
```css
img {
max-width: 100%;
height: auto;
}
[Try it Yourself »](#)
* * *
## Adding an Image to a Web Page
## Example
```css
img {
width: 100%;
height: auto;
}
[Try it Yourself »](#)
* * *
## Background Images
Background images can also respond to resizing and scaling.
Here are three different methods:
1. If the background-size property is set to "contain", the background image will scale to fit the content area, while maintaining its aspect ratio:
This is the CSS code:
## Example
```css
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. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:
## Example
This is the CSS code:
```css
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 will scale to completely cover the content area. Note that the aspect ratio of the image is preserved, and some parts of the background image may be clipped.
This is the CSS code:
## Example
```css
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
[Try it Yourself »](#)
* * *
## Show Different Images on Different Devices
Large images can look great on a computer screen, but they can be cumbersome on smaller devices. It is not necessary to load a large image on a small device, as it can slow down the page load. Therefore, we can use media queries to display different images on different devices.
The following large and small image will be displayed on different devices:
!(#)!(#)
## Example
```css
/* 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 media query min-device-width instead of min-width, which checks the device width instead of the browser width. The image size will not change when the browser window is resized.
## Example
```css
/* Device smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* Device 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
[Try it Yourself »](#)
* * *
## HTML5 `` Element
The HTML5 `` element allows you to define multiple images.
### Browser Support
| Element | | | | | |
| --- | --- | --- | --- | --- | --- |
| `` | Not supported | 38.0 | 38.0 | Not supported | 25.0 |
The `` element works similar to the `