diff --git a/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md
index 7447ecefec..2218278ca7 100644
--- a/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md
+++ b/curriculum/challenges/spanish/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.spanish.md
@@ -7,7 +7,16 @@ 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: img {
ancho máximo: 100%;
bloqueo de pantalla;
altura: auto;
}
La propiedad de max-width
del 100% ajusta la imagen para que se ajuste 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.
+ 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
del 100% ajusta la imagen para que se ajuste 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.
@@ -18,11 +27,11 @@ localeTitle: Hacer una imagen receptiva
```yml
tests:
- text: Su etiqueta img
debe tener un max-width
establecido al 100%.
- testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img
tag should have a max-width
set to 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", "Your img
tag should have a display
set to block.");'
+ 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), "Your img
tag should have a height
set to auto.");'
+ testString: 'assert(code.match(/height:\s*?auto;/g), "Tu etiqueta img
debe tener una height
establecida en auto.");'
```