---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: ''
localeTitle: Hacer una imagen receptiva
---
## Description
Hacer que las imágenes respondan con CSS es realmente muy simple. En lugar de aplicar un ancho absoluto a un elemento: img { width: 720px; }
Puedes usar:
```css
img {
max-width: 100%;
display: block;
height: auto;
}
```
La propiedad de max-width
al 100% ajusta la imagen para que se adapte al ancho de su contenedor, pero la imagen no se estirará más que su ancho original. La configuración de la propiedad de display
para bloquear cambia la imagen de un elemento en línea (su valor predeterminado) a un elemento de bloque en su propia línea. La propiedad de height
de auto mantiene la relación de aspecto original de la imagen.
## Instructions
Agregue reglas de estilo para la etiqueta img
para que responda al tamaño de su contenedor. Debe mostrarse como un elemento de nivel de bloque, debe ajustarse a todo el ancho de su contenedor sin estirarlo y debe mantener su relación de aspecto original.
## Tests
```yml
tests:
- text: Su etiqueta img
debe tener un max-width
establecido al 100%.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Su etiqueta img
debe tener un max-width
establecido al 100%.");'
- text: Su etiqueta img
debe tener un conjunto de display
para bloquear.
testString: 'assert($("img").css("display") == "block", "Su etiqueta img
debe tener un conjunto de display
para bloquear.");'
- text: Tu etiqueta img
debe tener una height
establecida en auto.
testString: 'assert(code.match(/height:\s*?auto;/g), "Tu etiqueta img
debe tener una height
establecida en auto.");'
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```